javascript - 如何在 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，颜色会按照我想要的方式交替和进展，但突然间，每组中的两个条形都被着色为相同的颜色。

如何使用 colorByPoint，同时保持每个 POINT 保持不同的颜色(您可能认为默认情况下会这样做)。

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/