Highcharts-如何为系列设置自定义颜色

Question

我正在使用Highcharts渲染项目的一些图表。我的问题是，当我尝试在中设置colorsarray时plotOptions.column，它不起作用。虽然，它适用于plotOptions.pie。

我需要为不同的系列类型设置不同的颜色预设。因此，当我添加相同类型的系列时，它们的颜色会从colors数组中选取。但是现在，由于某些奇怪的原因，尽管我colors为每种系列类型定义了自己的数组，但仍显示了默认颜色。

这是用来更好地理解我的意思的小提琴：http : //jsfiddle.net/c5nhd/1/

这是官方文档的链接：http : //api.highcharts.com/highcharts#plotOptions.column.colors

Answer 1

从我们自定义的颜色数组中为不同系列的柱形图提供不同颜色的演示，从而覆盖高图的默认颜色。

代码：

var colors = ['#FF530D', '#E82C0C', '#FF0000', '#E80C7A', '#E80C7A'];
$( '#container' ).highcharts({
    plotOptions: {
        pie: { //working here
            colors: colors
        }
    },
    colors:colors,
    series: [{
        type: 'column',
        data: [25, 34, 15, 17, 19],  
    },{
        type: 'column',
        data: [25, 34, 15, 17, 19],  
    },{
        type: 'column',
        data: [25, 34, 15, 17, 19],  
    }, {
        type: 'pie',
        data: [25, 34, 15, 17, 19],
        center: ['75%', '30%']
    }]
});

Answer 2

技巧是设置系列 颜色而不是全局选项颜色或点颜色。

全局选项颜色是页面上所有图表的应用集。如果你把它应用到另一个图表上就可以了。

另外，colorByPoint需要为false。默认为 false，因此您可以排除。

如果您想包含图例，还要确保设置颜色而不是颜色。如果您设置多种颜色，图例将不知道使用什么颜色，并且只会使用默认颜色。

$( '#container' ).highcharts({
    plotOptions: {
        column: { 
         //colorByPoint: false,
         //stacking: 'percent',
         },
         pie: { 
            colors: ['#FF530D', '#E82C0C', '#FF0000', '#E80C7A', '#E80C7A']
        }
    },
    series: [{
        type: 'column',
        color: '#FF530D',
        data: [25, 34, 15, 17, 19]
    }, {
        type: 'pie',
        data: [25, 34, 15, 17, 19],
        center: ['75%', '30%']
    }, {
        type: 'column',
        color: '#333333',
        data: [15, 27, 10, 23, 21]
    }]
});

这是您的 js fiddle 的更新。 http://jsfiddle.net/c5nhd/4/

如果您希望按百分比堆叠，这也适用。