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

重置主题后,应用新主题就好像这是第一个应用主题一样.

演示@ jsFiddle