javascript Highcharts - 如何为系列设置自定义颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24688384/
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 - How to set custom colors for the series
提问by templatify
I'm using Highcharts to render some charts for a project. My problem is that when I try to set colorsarray in plotOptions.column, it doesn't work. Although, it works fine for plotOptions.pie.
我正在使用 Highcharts 为项目呈现一些图表。我的问题是，当我尝试在 中设置colors数组时plotOptions.column，它不起作用。虽然，它适用于plotOptions.pie.
What I need to do is to set different color presets for different series types. So when I add series of same type, they have colors picked up from their colorsarray. But now, for some weird reason, the default colors are showing although I have defined my own colorsarray for each series type.
我需要做的是为不同的系列类型设置不同的颜色预设。因此，当我添加相同类型的系列时，它们会从colors数组中提取颜色。但是现在，出于某种奇怪的原因，尽管我colors为每个系列类型定义了自己的数组，但仍显示默认颜色。
Here is the fiddle to better understand what I mean: http://jsfiddle.net/c5nhd/1/
这是更好地理解我的意思的小提琴：http: //jsfiddle.net/c5nhd/1/
And here is the link to official documentation: http://api.highcharts.com/highcharts#plotOptions.column.colors
这是官方文档的链接：http: //api.highcharts.com/highcharts#plotOptions.column.colors
采纳答案by Rahul Gupta
DEMOof different color for different series of the column chart from our customized array of colors thus overriding the default colors of the highcharts.
从我们自定义的颜色数组中为不同系列的柱形图提供不同颜色的演示，从而覆盖高图的默认颜色。
code:
代码：
var colors = ['#FF530D', '#E82C0C', '#FF0000', '#E80C7A', '#E80C7A'];
$( '#container' ).highcharts({
plotOptions: {
pie: { //working here
colors: colors
}
},
colors:colors,
series: [{
type: 'column',
data: [25, 34, 15, 17, 19],
},{
type: 'column',
data: [25, 34, 15, 17, 19],
},{
type: 'column',
data: [25, 34, 15, 17, 19],
}, {
type: 'pie',
data: [25, 34, 15, 17, 19],
center: ['75%', '30%']
}]
});
回答by John Anastasio
The trick is to set the seriescolorand not global options colors or point colors.
诀窍是设置系列颜色而不是全局选项颜色或点颜色。
Global options colors is an applied set for all charts on the page. It will be ok if you apply it to another chart.
全局选项颜色是页面上所有图表的应用集。如果您将其应用于另一个图表就可以了。
Also, colorByPointwill need to be false. This is default false, so you can exclude.
此外，colorByPoint需要为false。这是默认的 false，因此您可以排除。
Also make sure to set colorand not color(s)if you wish to include a legend. The legend will not know what color to use if you set multiple colors and will just default.
如果您希望包含图例，请确保设置颜色而不是颜色。如果您设置了多种颜色，图例将不知道要使用什么颜色，并且只会默认。
$( '#container' ).highcharts({
plotOptions: {
column: {
//colorByPoint: false,
//stacking: 'percent',
},
pie: {
colors: ['#FF530D', '#E82C0C', '#FF0000', '#E80C7A', '#E80C7A']
}
},
series: [{
type: 'column',
color: '#FF530D',
data: [25, 34, 15, 17, 19]
}, {
type: 'pie',
data: [25, 34, 15, 17, 19],
center: ['75%', '30%']
}, {
type: 'column',
color: '#333333',
data: [15, 27, 10, 23, 21]
}]
});
Here is an update to your js fiddle. http://jsfiddle.net/c5nhd/4/
这是对您的 js 小提琴的更新。 http://jsfiddle.net/c5nhd/4/
This also works if you wish to stack by percent.
如果您希望按百分比堆叠，这也适用。
回答by Zitengwa
In fact, You should use the latest highcharts.js (Highcharts JS v6.1.4 (2018-09-25)). I have fixed this using version 6x.
事实上，你应该使用最新的 highcharts.js (Highcharts JS v6.1.4 (2018-09-25))。我已经使用版本 6x 修复了这个问题。
