javascript - 更改 Highcharts 主题(部分有效)

Question

我在更改 highcharts 的主题时遇到问题。我创建了一个数组来保存所有主题，并尝试通过选择列表 onChange 事件更改它们。

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);
    });

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

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

谢谢

Answer 1

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

不幸的是，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);
}

重置主题后，应用新主题就像应用第一个主题一样。

Demo @ jsFiddle