如何在Highcharts中获得colorByPoint外观而不将组中的所有条形图着色为相同的颜色？

Question

我正在尝试使用colorByPoint选项，因为这或多或少是我想要的，但是我有一个双条形图，每个部分有两个条形图，我想根据它们为每个颜色设置不同的颜色系列颜色。

当我添加以下Highcharts片段时，条形图按照我想要的方式设置。但最终我希望每个部分都有自己的配色方案。 （浅紫色，深紫色，浅蓝色，深蓝色等）：

plotOptions: {
     series: {
        dataLabels: {
             enabled: true,
             format: '{point.label}'
        },
        tooltip: {
            valueSuffix: ' km'
        },
        pointPadding: 0,
        groupPadding: 0.1,
        borderWidth: 0,
        colorByPoint: false       // Switch this to true in the jsFiddle
    },
}

如果您将colorByPoint切换为true，颜色会按照我想要的方式交替进行，但突然间，每组中的两个条形颜色都相同。

如何在保持每个POINT保持不同颜色的同时使用colorByPoint（您认为默认情况下会这样做）。

jsFiddle

Answer 1

正如评论中所提到的，colorByPoint每个系列都有效，所以它不适用于全局颜色数组。但是，您可以像colorByPoint一样定义每个系列的颜色数组。然后你可以拆分初始数组并将它们分配给系列。

var colors = ['#CDAED1', '#82368C', '#94B8D2', '#2a71a5', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', 'orange'];

var splitColors = [
    [],
    []
  ];

colors.forEach((color, i) => {
  splitColors[i % 2].push(color)
});

在图表配置中：

series: [{
  colors: splitColors[0]
}, {
  colors: splitColors[1]
}]

示例：http://jsfiddle.net/u59176h4/33/