我需要为Highcharts图中的每一列动态设置不同的颜色。我的Highcharts图是:
options = {
chart: {
renderTo: 'chart',
type: 'column',
width: 450
},
title: {
text: 'A glance overview at your contest’s status'
},
xAxis: {
categories: ['Approved Photos', 'Pending Approval Photos',
'Votes', 'Entrants'],
labels: {
//rotation: -45,
style: {
font: 'normal 9px Verdana, sans-serif, arial'
}
}
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Amount'
}
},
legend: {
enabled: false
},
series: []
};
series = {
name: "Amount",
data: [],
dataLabels: {
enabled: true,
color: '#000000',
align: 'right',
x: -10,
y: 20,
formatter: function () {
return this.y;
},
style: {
font: 'normal 13px Verdana, sans-serif'
}
}
};
字符串
数据是这样设置的:
for (var i in Data) {
if (parseInt(Data[i]) != 0) {
series.data.push(parseInt(Data[i]));
} else {
series.data.push(null);
}
}
options.series.push(series);
chart = new Highcharts.Chart(options);
型
如何在这个循环中为每个数据点动态设置不同的颜色?
5条答案
按热度按时间dojqjjoe1#
这里是另一个解决方案与最新版本的Highcharts(目前3.0)。
将colorByPoint选项设置为true并定义所需的颜色序列。
字符串
下面是基于Highcharts Column with rotated labels demo的example
cdmah0mi2#
当您将值添加到series.data时,您还可以使用点选项设置颜色,例如
字符串
有关点选项的更多详细信息,请参见https://api.highcharts.com/class-reference/Highcharts.Point#color
vom3gejh3#
尝试以下方法之一:
方法一:
字符串
方法二:
型
n7taea2i4#
我有颜色从API响应和2系列。第二系列与动态颜色。
下面是设置动态颜色时,系列Map的示例。
字符串
您还可以阅读更多关于Highcharts系列点和标记
wfveoks05#
字符串