关于 Highcharts 的问题,如何在每个 columnrange bar 上设置不同的颜色。 我尝试了一些选项,但无法正常工作。
我尝试的例子:
这是我在 JSFiddle 上的代码:
https://jsfiddle.net/1abugmka/#&togetherjs=N72vHyNcPL
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true,
renderTo: 'container',
},
tooltip: {
pointFormat: ""
},
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
categories:['1','2']
},
yAxis:{
labels: {
enabled: false
},
title: {
text: 'Months'
}
},
colors: ['#562F1E', '#AF7F24'],
series: [{
data: [
[Date.UTC(2015, 10, 01),Date.UTC(2015, 02, 04)],
[Date.UTC(2014, 10, 01),Date.UTC(2014, 02, 04)],
]
}],
legend: {
enabled: false
},
exporting: {
enabled: false
}
});
});
最佳答案
一种选择是使用 colorByPoint
,它为每个点分配一种颜色,而不是为每个系列分配一种颜色。示例实现(JSFiddle):
plotOptions: {
columnrange: {
colorByPoint: true
colors: ['red', 'blue', 'yellow'] // if you want custom order of colors
}
}
另一种选择是将每个点定义为一个对象,而不是一个数组。然后您可以设置每个单独点对象的 color
选项。示例实现(JSFiddle):
series: [{
data: [
{ low: Date.UTC(2015, 10, 01), high: Date.UTC(2015, 02, 04), color: 'red' },
{ low: Date.UTC(2014, 10, 01), high: Date.UTC(2014, 02, 04), color: 'blue' },
]
}]
关于javascript - 每个 HighCharts 颜色 - columnrange bar,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35540460/