我想为基于列的图表的钻取图的每一列分配我自己的颜色。所以我根据一些预先计算创建了区域并分配了颜色代码。
我的代码如下:
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Browser market shares. January, 2015 to May, 2015'
},
subtitle: {
text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.com</a>.'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33,
drilldown: 'Microsoft Internet Explorer'
}, {
name: 'Firefox',
y: 10.38,
drilldown: 'Firefox'
}]
}],
drilldown: {
series: [{
name: 'Microsoft Internet Explorer',
id: 'Microsoft Internet Explorer',
data: [
[
'v11.0',
14 // Over max set in zone get default color
],
[
'v8.0',
10
],
[
'v6.0',
8
],
[
'v7.0',
4
]
],
zones: [{
color: '#ffcc00'
}, {
color: '#AA7F39'
}, {
color: '#ff8000'
}, {
color: '#FFFF00'
}]
}, {
name: 'Firefox',
id: 'Firefox',
data: [
[
'v35',
12,
],
[
'v34',
10
],
[
'v38',
7
],
[
'v33',
4
],
[
'v32',
3
]
],
zones: [{
color: '#FFFF00'
}, {
color: '#FFFF00'
}, {
color: '#ff8000'
}, {
color: '#AA7F39'
}]
}]
}
});
我的小提琴是
https://jsfiddle.net/jqefrrj0/
现在,当我单击 Microsoft 时,向下钻取图具有所有黄色列,而我希望它根据区域中给出的每种颜色进行更改。
就像先是黄色,然后是芥末色、橙色、黄色。
如何为向下钻取系列的每一列实现上述颜色。