如何更改我的 highcharts 饼图的颜色？答案

【问题标题】：How can I change the colors of my highcharts piechart?如何更改我的 highcharts 饼图的颜色？
【发布时间】：2012-04-17 21:21:46
【问题描述】：

我正在使用 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>

我的饼图可以使用此代码，但它只使用默认的调色板。

如何指定自定义颜色集？

【问题讨论】：

标签： javascript highcharts highstock

【解决方案1】：

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

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

【讨论】：

我已经尝试过了，但是我的图例颜色正在改变，但饼图颜色没有改变。
stackoverflow.com/a/28840716/3660648 请检查这个。我们必须在系列级别添加color 属性。

【解决方案2】：

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

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

【讨论】：

如何使用 config 方法初始化工具提示功能？

【解决方案3】：

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

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

【讨论】：

如果您转到Pie Chart Demo，然后点击“查看视觉主题”，您将看到如何操作整个主题。
嗨，使用上面的代码没有改变托德颜色。仍然显示饼图的默认颜色

【解决方案4】：

回答@Loko Web Design 的问题https://stackoverflow.com/a/38794379/7475250

是否有网页说明每种“颜色”对应的内容？这里的所有答案都显示如下：
colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4']
但是#333、#CB2326 等实际上发生了什么变化？显然我可以改变它们，看看有什么变化，但如果有这个就好了在某处可以参考。

颜色文档可用here。尽管有帮助，但它们并没有描述更改特定颜色的实际作用。下面是我最好的描述。

colors 属性为 Highcharts 提供了您希望图表循环显示的颜色。例如，如果您有以下颜色道具。

colors: ['blue', 'green']

您的馅饼切片会在蓝色和绿色之间交替。将蓝色变为红色，您的颜色将在红色和绿色之间交替。用下面的fiddle测试一下

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

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

是否有网页说明每种“颜色”对应的内容？这里的所有答案都显示如下：

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

但是#333、#CB2326 等实际上发生了什么变化？显然，我可以更改它们并查看发生了什么变化，但如果能在某个地方提供此参考，那就太好了。

【讨论】：

【解决方案7】：

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

【讨论】：

很多答案都说要使用“colors”属性，但只有这个有效！我建议用你想要的颜色创建一个从 .highcharts-color-0 到 .highcharts-color-9 的 css 覆盖！

【解决方案8】：

Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]

在高图表中，我们拥有内置颜色。所以你需要改变颜色[0]或[1]的路径............[6]

【讨论】：