Javascript HighCharts ：是否可以自定义单个系列的颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5727419/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HighCharts : Is it possible to customize the colors of individual series?
提问by Tjaart
I am using HighCharts for a line graph report. In this specific report I have been asked to Customize the colours of each series. The series will always stay the same. So for example:
我将 HighCharts 用于折线图报告。在这个特定的报告中，我被要求自定义每个系列的颜色。该系列将始终保持不变。例如：
John series: Blue dashed line Mary series: Solid Red Line
约翰系列：蓝色虚线玛丽系列：红色实线
Does anyone know how to accomplish this?
有谁知道如何做到这一点？
回答by Eric C
Options can be set separately for each series.
可以为每个系列单独设置选项。
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'John',
color: '#0066FF',
dashStyle: 'ShortDash',
data: [
[Date.UTC(2010, 0, 1), 29.9],
[Date.UTC(2010, 2, 1), 71.5],
[Date.UTC(2010, 3, 1), 106.4]
]
},{
name: 'Mary',
color: '#FF0000',
data: [
[Date.UTC(2010, 0, 1), 60.9],
[Date.UTC(2010, 1, 1), 40.5],
[Date.UTC(2010, 2, 1), 90.0],
[Date.UTC(2010, 3, 1), 80.4]
]
}]
});
回答by Ricardo Alvaro Lohmann
If you read the api here, you'll see the following text.
如果您阅读此处的 api ，您将看到以下文本。
Serie
意甲
The actual series to append to the chart. In addition to the members listed below, any member of the
plotOptionsfor that specific type of plot can be added to a series individually. For example, even though a generallineWidthis specified inplotOptions.series, an individuallineWidthcan be specified for each series.
要附加到图表的实际系列。除了下面列出的成员之外，该
plotOptions特定类型图的任何成员都可以单独添加到一个系列中。例如，即使在lineWidth中指定了将军plotOptions.series，lineWidth也可以为每个系列指定一个人。
So you can add anything from plotOptions.
所以你可以从plotOptions.
Demo:
演示：
series: [{
name: 'serie1',
data: [0,1,2,3,4,5,6,7,8,9],
color: '#FFFF00',
lineWidth: 4,
id: 'serie1',
step: true
}]
