我正在尝试让主题在我的图表上运行，但我失败了。我有这个jsfiddle来证明这个问题。它看起来像应用了一些样式（例如，按钮颜色确实改变了），但是其他一些没有（像背景颜色）。
Highcharts.darkgreen = {
colors: ['#DDDF0D', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee', '#ff0066', '#eeaaee',
'#55BF3B', '#DF5353', '#7798BF', '#aaeeee'
],
chart: {
backgroundColor: {
linearGradient: [0, 0, 250, 500],
stops: [
[0, 'rgb(48, 96, 48)'],
[1, 'rgb(0, 0, 0)']
]
},
borderColor: '#000000',
borderWidth: 2,
className: 'dark-container',
plotBackgroundColor: 'rgba(255, 255, 255, .1)',
plotBorderColor: '#CCCCCC',
plotBorderWidth: 1
},
title: {
style: {
color: '#C0C0C0',
font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},
subtitle: {
style: {
color: '#666666',
font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
}
},
xAxis: {
gridLineColor: '#333333',
gridLineWidth: 1,
labels: {
style: {
color: '#A0A0A0'
}
},
lineColor: '#A0A0A0',
tickColor: '#A0A0A0',
title: {
style: {
color: '#CCC',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
}
},
yAxis: {
gridLineColor: '#333333',
labels: {
style: {
color: '#A0A0A0'
}
},
lineColor: '#A0A0A0',
minorTickInterval: null,
tickColor: '#A0A0A0',
tickWidth: 1,
title: {
style: {
color: '#CCC',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
}
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.75)',
style: {
color: '#F0F0F0'
}
},
toolbar: {
itemStyle: {
color: 'silver'
}
},
plotOptions: {
line: {
dataLabels: {
color: '#CCC'
},
marker: {
lineColor: '#333'
}
},
spline: {
marker: {
lineColor: '#333'
}
},
scatter: {
marker: {
lineColor: '#333'
}
},
candlestick: {
lineColor: 'white'
}
},
legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: '#A0A0A0'
},
itemHoverStyle: {
color: '#FFF'
},
itemHiddenStyle: {
color: '#444'
}
},
credits: {
style: {
color: '#666'
}
},
labels: {
style: {
color: '#CCC'
}
},
navigation: {
buttonOptions: {
symbolStroke: '#DDDDDD',
hoverSymbolStroke: '#FFFFFF',
theme: {
fill: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0.4, '#606060'],
[0.6, '#333333']
]
},
stroke: '#000000'
}
}
},
// scroll charts
rangeSelector: {
buttonTheme: {
fill: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0.4, '#888'],
[0.6, '#555']
]
},
stroke: '#000000',
style: {
color: '#CCC',
fontWeight: 'bold'
},
states: {
hover: {
fill: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0.4, '#BBB'],
[0.6, '#888']
]
},
stroke: '#000000',
style: {
color: 'white'
}
},
select: {
fill: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0.1, '#000'],
[0.3, '#333']
]
},
stroke: '#000000',
style: {
color: 'yellow'
}
}
}
},
inputStyle: {
backgroundColor: '#333',
color: 'silver'
},
labelStyle: {
color: 'silver'
}
},
navigator: {
handles: {
backgroundColor: '#666',
borderColor: '#AAA'
},
outlineColor: '#CCC',
maskFill: 'rgba(16, 16, 16, 0.5)',
series: {
color: '#7798BF',
lineColor: '#A6C7ED'
}
},
scrollbar: {
barBackgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0.4, '#888'],
[0.6, '#555']
]
},
barBorderColor: '#CCC',
buttonArrowColor: '#CCC',
buttonBackgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0.4, '#888'],
[0.6, '#555']
]
},
buttonBorderColor: '#CCC',
rifleColor: '#FFF',
trackBackgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, '#000'],
[1, '#333']
]
},
trackBorderColor: '#666'
},
// special colors for some of the
legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
background2: 'rgb(35, 35, 70)',
dataLabelsColor: '#444',
textColor: '#C0C0C0',
maskColor: 'rgba(255,255,255,0.3)'
}
;;
Highcharts.setOptions(Highcharts.darkgreen);;
new Highcharts.stockChart({
"exporting": {
"enabled": true
},
"chart": {
"renderTo": "researchChartComponentChartContainer381896448",
"backgroundColor": "#fff",
"zoomType": "xy"
},
"title": {
"text": ""
},
"rangeSelector": {
"inputEnabled": true,
"buttons":
[{
type: 'day',
count: 1,
text: '1d'
}, {
type: 'day',
count: 5,
text: '5d'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'year',
count: 2,
text: '2y'
}, {
type: 'year',
count: 3,
text: '3y'
}, {
type: 'year',
count: 4,
text: '4y'
}, {
type: 'year',
count: 5,
text: '5y'
}, {
type: 'year',
count: 8,
text: '8y'
}, {
type: 'all',
text: 'All'
}]
,
"selected": 12
},
"scrollbar": {
"liveRedraw": false
},
"tooltip": {
"valueDecimals": 2,
"shared": false
},
"series": [{
"marker": {
"enabled": true
},
"yAxis": 0,
"name": "Common Net Income",
"index": 0,
"type": "line"
}],
"credits": {
"text": "Debris Publishing Inc. ",
"href": "www.debrispublishing.com"
},
"xAxis": {
"title": {
"text": "Time"
},
"type": "datetime"
},
"plotOptions": {
"series": {
"marker": {
"enabled": false,
"states": {
"hover": {
"enabled": true
}
},
"radius": 4
},
"animation": false
}
},
"yAxis": [{
"title": {
"text": "Millions"
},
"opposite": false,
"labels": {
"format": "{value}"
},
"height": "100%"
}, {
"title": {
"text": "Price"
},
"opposite": true,
"labels": {
"format": "{value}"
},
"height": "100%"
}],
"navigator": {
"adaptToUpdatedData": false
},
"legend": {
"enabled": true,
"floating": false
}
});
var chart = $('#researchChartComponentChartContainer381896448').highcharts();
chart.showLoading('Loading data from server...');;
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
var chart = $('#researchChartComponentChartContainer381896448').highcharts();
chart.series[0].setData(data, false);
chart.redraw();
chart.hideLoading();
})
知道可能出现什么问题吗？
答案 0 :(得分：0)
创建图表实例时，您将覆盖主题。
您的主题有：
Highcharts.darkgreen = {
chart: {
backgroundColor: {
linearGradient: [0, 0, 250, 500],
stops: [
[0, 'rgb(48, 96, 48)'],
[1, 'rgb(0, 0, 0)']
]
}
},
// ...
};
然后创建图表：
new Highcharts.stockChart({
"chart": {
"backgroundColor": "#fff"
},
// ...
});
然后#fff会覆盖您的线性渐变对象。最后定义的值保持不变。
请参阅this updated JSFiddle，我已删除了#fff以显示渐变。