50

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

我的饼图使用此代码，但它仅使用默认颜色托盘。

如何指定自定义颜色集？

4

8 回答 8

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

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

于 2012-04-09T14:30:05.550 回答
13

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

...,
plotOptions: {
  pie: {
   colors: [
     '#50B432', 
     '#ED561B', 
     '#DDDF00', 
     '#24CBE5', 
     '#64E572', 
     '#FF9655', 
     '#FFF263', 
     '#6AF9C4'
   ],
   allowPointSelect: true,
   cursor: 'pointer',
   dataLabels: {
     enabled: false
   },
   showInLegend: true
 }
},
...
于 2017-05-01T00:00:43.337 回答
7

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

Highcharts.theme = {colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', 
                             '#64E572', '#FF9655', '#FFF263', '#6AF9C4']});
于 2012-04-04T13:35:22.653 回答
2

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

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

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

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

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

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

colors: ['blue', 'green']

你的馅饼片会在蓝色和绿色之间交替。将蓝色变为红色，您的颜色将在红色和绿色之间交替。用下面的小提琴测试它

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

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

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

于 2017-09-26T19:28:05.663 回答
1 
Highcharts.setOptions({
 colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326',      '#6AF9C4']
});
于 2013-07-30T18:12:01.043 回答
1

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

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

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

于 2016-08-05T16:59:21.637 回答
1

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

于 2016-11-25T11:23:55.060 回答
0

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

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

于 2017-02-10T12:51:06.937 回答