我怎样才能改变我的highchart图表的颜色？

我正在使用highcharts来制作一个饼图，但是我无法为我的图表加载自定义颜色集。

这是我的代码：

<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> 

我的饼图使用这个代码，但它只使用默认的颜色托盘。

你如何指定一个自定义颜色集？

Answer 1

 Highcharts.setOptions({ colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'] }); 

看下面的例子http://jsfiddle.net/8QufV/

Answer 2

我认为你需要做的是使用主题而不是setOptions来设置颜色，如下所示：

 Highcharts.theme = {colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']}); 

Answer 3

 Highcharts.setOptions({ colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4'] }); 

Answer 4

有没有一个网页，说明每个“颜色”对应的内容？ 所有的答案都显示如下：

 colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4'] 

但是＃333，＃CB2326等究竟发生了什么变化？ 很明显，我可以改变他们，看看有什么变化，但是这个引用可以用在某个地方。

Answer 5

对于那些喜欢在configuration中初始化颜色的人，可以简单地将颜色置于configuration对象的plotOptions部分中，如下所示：

 ..., plotOptions: { pie: { colors: [ '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4' ], allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: false }, showInLegend: true } }, ... 

Answer 6

我有同样的问题。 在highcharts.css中有一个名为“默认颜色”的部分。 删除了这部分之后，我可以使用自定义颜色。 无论如何，我想你不需要highcharts.css，如果你使用v5.0.4或更高版本。

Answer 7

Highcharts.Color（Highcharts.getOptions（）。颜色[0]）。setOpacity（0.5）获得（ 'RGBA'）]

在高图内置的颜色，我们有。 所以你需要改变颜色的path[0]或[1] …….. [6]

Answer 8

回答@Loko网页devise的问题https://stackoverflow.com/a/38794379/7475250

有没有一个网页，说明每个“颜色”对应的是什么？ 所有的答案都显示如下：

 colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4'] 

但是＃333，＃CB2326等究竟发生了什么变化？ 很明显，我可以改变他们，看看有什么变化，但是这个引用可以用在某个地方。

颜色文档可在这里find 。 尽pipe有帮助，但他们并没有描述实际上改变特定颜色的方式。 以下是我最好的描述。

颜色prop给Highcharts你想让图表循环的颜色。 例如，如果你有以下的颜色道具。

 colors: ['blue', 'green'] 

你的馅饼切片将在蓝色和绿色之间交替。 然后将蓝色变为红色，然后在红色和绿色之间切换。 用下面的小提琴进行testing

展开颜色列表会增加重复之前的颜色数量。

 colors: ['blue', 'green', 'yellow'] 

如果超过4个切片在您的数据集中，将重复的颜色。