Javascript 基于列的Highchart向下展开系列为每列指定颜色代码
我想为基于列的图表的向下展开图的每一列指定我自己的颜色。因此,我根据一些预先计算创建了分区并指定了颜色代码 我的代码如下:Javascript 基于列的Highchart向下展开系列为每列指定颜色代码,javascript,highcharts,colors,column-chart,Javascript,Highcharts,Colors,Column Chart,我想为基于列的图表的向下展开图的每一列指定我自己的颜色。因此,我根据一些预先计算创建了分区并指定了颜色代码 我的代码如下: Highcharts.chart('container', { chart: { type: 'column' }, title: { text: 'Browser market shares. January, 2015 to May, 2015' }, subtitle: { tex
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'
}]
}]
}
});
Highcharts.chart('container'{
图表:{
类型:“列”
},
标题:{
文字:“浏览器市场份额。2015年1月至2015年5月”
},
副标题:{
文本:“单击列以查看版本。来源:。”
},
xAxis:{
类型:“类别”
},
亚克斯:{
标题:{
文字:“总市场份额百分比”
}
},
图例:{
已启用:false
},
打印选项:{
系列:{
边框宽度:0,
数据标签:{
启用:对,
格式:“{point.y:.1f}%”
}
}
},
工具提示:{
headerFormat:“{series.name}
”,
pointFormat:“{point.name}:{point.y:.2f}占总数的百分比
”
},
系列:[{
名称:'品牌',
colorByPoint:对,
数据:[{
名称:“Microsoft Internet Explorer”,
y:56.33,
深入分析:“Microsoft Internet Explorer”
}, {
名称:“Firefox”,
y:10.38,
深入分析:“Firefox”
}]
}],
向下展开:{
系列:[{
名称:“Microsoft Internet Explorer”,
id:“Microsoft Internet Explorer”,
数据:[
[
“v11.0”,
14//超过区域中设置的最大值获取默认颜色
],
[
“v8.0”,
10
],
[
“v6.0”,
8.
],
[
“v7.0”,
4.
]
],
分区:[{
颜色:“#ffcc00”
}, {
颜色:“#AA7F39”
}, {
颜色:“#ff8000”
}, {
颜色:“#FFFF00”
}]
}, {
名称:“Firefox”,
id:“Firefox”,
数据:[
[
“v35”,
12,
],
[
“v34”,
10
],
[
“v38”,
7.
],
[
“v33”,
4.
],
[
“v32”,
3.
]
],
分区:[{
颜色:“#FFFF00”
}, {
颜色:“#FFFF00”
}, {
颜色:“#ff8000”
}, {
颜色:“#AA7F39”
}]
}]
}
});
我的小提琴是
现在,当我单击Microsoft时,向下展开图中有所有黄色列,而我希望它根据区域中给定的每个颜色进行更改
先是黄色,然后是芥末,橙色,黄色
如何为深入系列的每一列实现上述颜色。您忘记设置
区域。值
您忘记设置
区域。值
是的,我可以不设置值吗??根据其他参数的不同,具有相同值的颜色可能会有所不同。请参阅我在这篇文章答案下的最后一条评论:@KamilKulig您正在根据数据集中的参数指定颜色。如果我已经为每个向下展开列指定了一个预先定义的颜色,并且我只想将其指定给相应的列,那么为什么不在点的选项中这样做呢?示例(深入到Microsoft Internet Explorer):@KamilKulig这正是我要找的。我试过了,但用了[],结果出错了。非常感谢你!!!!是的,我可以不设置值吗??根据其他参数的不同,具有相同值的颜色可能会有所不同。请参阅我在这篇文章答案下的最后一条评论:@KamilKulig您正在根据数据集中的参数指定颜色。如果我已经为每个向下展开列指定了一个预先定义的颜色,并且我只想将其指定给相应的列,那么为什么不在点的选项中这样做呢?示例(深入到Microsoft Internet Explorer):@KamilKulig这正是我要找的。我试过了,但用了[],结果出错了。非常感谢你!!!!
zones: [{
color: '#ffcc00',
value:5
}, {
color: '#AA7F39',
value:12
}, {
color: '#ff8000'
}, {
color: '#FFFF00'
}]