javascript 更改 Highcharts 主题(部分有效)
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/9871876/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing a Highcharts theme (partially working)
提问by Steve
I have a problem with changing the theme for highcharts. I have created an array to hold all the themes and am trying to change them via a select list onChange event.
我在更改 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.....
My code to change the theme is :
我更改主题的代码是:
$('#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);
});
The problem I am having is that if for example I switch to the Skies theme it is fine, but then changing to any other theme, the skies background remains along with other elements of the theme.
我遇到的问题是,例如,如果我切换到天空主题,那很好,但随后更改为任何其他主题,天空背景会与主题的其他元素一起保留。
Does anyone know of a proper way to reset the theme entirely?
有谁知道完全重置主题的正确方法?
Thanks
谢谢
回答by Jugal Thakkar
Every time you set a theme, it merges with the existing theme, and hence any option that is not present in the new theme it will pick from the existing theme. This may not be desired always.
每次设置主题时,它都会与现有主题合并,因此新主题中不存在的任何选项都会从现有主题中选择。这可能并不总是需要的。
Unfortunately, Highcharts does not give an option to go back to the very defaults that are set at the time of first load. The following code can be used to get that functionality
不幸的是,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);
}
After resetting the theme, applying a new theme would work as if that's the first theme being applied.
重置主题后,应用新主题就好像这是应用的第一个主题一样。
回答by Linger
If you remove all of the color options and reload the Highcharts object it will default back to the default basic theme. If you set the below to null it should not show a back ground image once reloaded.
如果您删除所有颜色选项并重新加载 Highcharts 对象,它将默认返回默认的基本主题。如果您将下面的设置为空,则在重新加载后不应显示背景图像。
plotBackgroundImage: null