更改Highcharts主题(部分工作）

Changing a Highcharts theme (partially working)

本文关键字：工作 Highcharts 主题 更改      更新时间：2023-09-26

我在更改高图的主题时遇到问题。我已经创建了一个数组来容纳所有主题，并试图通过change事件上的选择列表来更改它们。

var highcharts_theme = [];
/* Default theme */
highcharts_theme.push({});
/* Dark Blue theme */
highcharts_theme.push({
    colors: ["#DDDF0D", "#55BF3B", "#DF5353", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
        "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
    chart: {
        backgroundColor: {
            linearGradient: [0, 0, 250, 500],
            stops: [
                [0, 'rgb(48, 48, 96)'],
                [1, 'rgb(0, 0, 0)']
            ]
        },
.... Shortened for brevity.....

我更改主题的代码是：

    $('#theme-type').selectmenu({ width: 200 }).change(function (e) {
        var themeIndex = parseInt($('#theme-type').val());
        Highcharts.theme = highcharts_theme[themeIndex];
        // Apply the theme
        highchartsOptions = Highcharts.setOptions(Highcharts.theme);
    });

我遇到的问题是，例如，如果我切换到"天空"主题，这很好，但随后切换到任何其他主题，天空背景将与主题的其他元素一起保留。

有人知道完全重置主题的正确方法吗？

感谢

每次设置主题时，它都会与现有主题合并，因此，新主题中不存在的任何选项都会从现有主题中选择。这可能并不总是可取的。

不幸的是，Highcharts没有提供返回到第一次加载时设置的默认值的选项。以下代码可用于获得的功能

// Make a copy of the defaults, call this line before any other setOptions call
var HCDefaults = $.extend(true, {}, Highcharts.getOptions(), {});
function ResetOptions() {
    // Fortunately, Highcharts returns the reference to defaultOptions itself
    // We can manipulate this and delete all the properties
    var defaultOptions = Highcharts.getOptions();
    for (var prop in defaultOptions) {
        if (typeof defaultOptions[prop] !== 'function') delete defaultOptions[prop];
    }
    // Fall back to the defaults that we captured initially, this resets the theme
    Highcharts.setOptions(HCDefaults);
}

重置主题后，应用一个新主题将如同应用的第一个主题一样。

演示@jsFiddle

如果删除所有颜色选项并重新加载Highcharts对象，它将默认返回到默认的基本主题。如果您将以下设置为null，则在重新加载后不应显示背景图像。

plotBackgroundImage: null
相关文章：