Javascript 如何更改 highcharts 饼图的颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10006529/
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
How can I change the colors of my highcharts piechart?
提问by Sreenath Plakkat
I'm using highcharts to make a piechart but I'm having trouble loading a custom color set for my chart.
我正在使用 highcharts 制作饼图，但无法为图表加载自定义颜色集。
Here is my code:
这是我的代码：
<script type="text/javascript">
$(function () {
Highcharts.setOptions({
colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
return new Highcharts.Chart({
chart: {
renderTo: 'trailpiechart',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
backgroundColor: "#f8f8f8",
margin: [20, 20, 20, 20]
},
credits: {
enabled: false
},
title: {
text: caption
},
tooltip: {
formatter: function () {
return this.y + ' links';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
legend: {
layout: 'vertical',
floating: false,
borderRadius: 0,
borderWidth: 0
},
series: [{
type: 'pie',
name: 'Browser share',
data: data
}]
});
});
</script>
My pie chart works with this code but it only uses the default color pallet.
我的饼图使用此代码，但它仅使用默认颜色托盘。
How do you specify a custom color set?
如何指定自定义颜色集？
回答by Ricardo Alvaro Lohmann
Highcharts.setOptions({
colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
Look the following example http://jsfiddle.net/8QufV/
看下面的例子 http://jsfiddle.net/8QufV/
回答by Ali Yazdani
For those of you that prefer to initialize the color in the configs, you could simply put the colors in the plotOptions portion of the config object like so:
对于那些喜欢在配置中初始化颜色的人，您可以简单地将颜色放在配置对象的 plotOptions 部分，如下所示：
...,
plotOptions: {
pie: {
colors: [
'#50B432',
'#ED561B',
'#DDDF00',
'#24CBE5',
'#64E572',
'#FF9655',
'#FFF263',
'#6AF9C4'
],
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
...
回答by Linger
I think what you need to do is set the colors using theme instead of setOptions as follows:
我认为您需要做的是使用主题而不是 setOptions 设置颜色，如下所示：
Highcharts.theme = {colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5',
'#64E572', '#FF9655', '#FFF263', '#6AF9C4']});
回答by BJax
To answer @Loko Web Design's question https://stackoverflow.com/a/38794379/7475250
回答@Loko Web Design 的问题https://stackoverflow.com/a/38794379/7475250
Is there a webpage that says to what each of the "colors" corresponds? All the answers here show something like:
colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4']But what do #333, #CB2326, etc. actually change? Obviously I can just change them and see what changes, but it would nice to have this reference available somewhere.
是否有网页说明每种“颜色”对应的内容？这里的所有答案都显示如下：
colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4']但是#333、#CB2326 等实际上改变了什么？显然，我可以更改它们并查看发生了哪些变化，但最好在某处提供此参考。
The color docs are available here. Although helpful they do not describe what changing a specific color actually does. Below is my best description.
颜色文档可在此处获得。虽然很有帮助，但它们并没有描述改变特定颜色的实际作用。下面是我最好的描述。
The colors prop gives Highcharts the colors you would like the chart to loop through. For example if you had the following color prop.
颜色道具为 Highcharts 提供您希望图表循环的颜色。例如，如果您有以下颜色道具。
colors: ['blue', 'green']
Your pie slices would alternate between blue and green. Changing blue to red your colors would then alternate between red and green. Test it with the following fiddle
你的馅饼切片会在蓝色和绿色之间交替。将蓝色更改为红色，您的颜色将在红色和绿色之间交替。用下面的小提琴测试它
Expanding the color list increases the number of colors before repeating.
在重复之前扩展颜色列表会增加颜色的数量。
colors: ['blue', 'green', 'yellow']
Would repeat the colors if more than 4 slices are in your dataset.
如果数据集中有 4 个以上的切片，则会重复颜色。
回答by min2bro
Highcharts.setOptions({
colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4']
});
回答by Loko Web Design
Is there a webpage that says to what each of the "colors" corresponds? All the answers here show something like:
是否有网页说明每种“颜色”对应的内容？这里的所有答案都显示如下：
colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4']
But what do #333, #CB2326, etc. actually change? Obviously I can just change them and see what changes, but it would nice to have this reference available somewhere.
但是#333、#CB2326 等实际上改变了什么？显然，我可以更改它们并查看发生了哪些变化，但最好在某处提供此参考。
回答by bugovicsb
I had the same problem. In highcharts.css there's a section called "Default colors". After I deleted this section, I could use custom colors. Anyway, I guess you do not need highcharts.css if you use version v5.0.4 or higher.
我有同样的问题。在 highcharts.css 中有一个名为“默认颜色”的部分。删除此部分后，我可以使用自定义颜色。无论如何，如果您使用 v5.0.4 或更高版本，我想您不需要 highcharts.css。
回答by Kondal
Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
In high charts inbuilt colors we have. So you need to change the path of the color[0] or [1]........[6]
在高级图表中，我们拥有内置颜色。所以你需要改变颜色的路径[0]或[1]........[6]
