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

Posted 2023-02-16

【中文标题】如何更改我的 highcharts 饼图的颜色？

【英文标题】：How can I change the colors of my highcharts piechart?

【发布时间】：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>

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

如何指定自定义颜色集？

【参考方案1】：

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

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

【讨论】：

我已经尝试过了，但是我的图例颜色正在改变，但饼图颜色没有改变。

***.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://***.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]