javascript - 如何更改高位图表的颜色?

Translate

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

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

如何指定自定义颜色集?

This question and all comments follow the "Attribution Required."

所有的回答

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

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

来源
Translate

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

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

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

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

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

是否有一个网页说明每种“颜色”对应什么?这里的所有答案都显示为:

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

但是,#333,#CB2326等实际上发生了什么变化?显然,我可以更改它们并查看发生了什么更改,但是最好将此引用放在某处。

颜色文档可用这里。尽管有帮助,但它们并未描述更改特定颜色实际执行的操作。以下是我的最佳描述。

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

colors: ['blue', 'green']

您的饼图将在蓝色和绿色之间交替显示。将蓝色更改为红色后,颜色将在红色和绿色之间交替。使用以下内容进行测试小提琴

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

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

如果您的数据集中有四个以上的切片,则将重复颜色。

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

是否有一个网页说明每种“颜色”对应什么?这里的所有答案都显示为:

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

但是,#333,#CB2326等实际上发生了什么变化?显然,我可以更改它们并查看发生了什么更改,但是最好将此引用放在某处。

来源
Translate

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

来源
Translate

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

在高图内置颜色中,我们有。因此,您需要更改颜色[0]或[1] ........ [6]的路径

来源
Leave a Reply
You must be logged in to post a answer.
关于作者