Как вы получаете появление colorByPoint в Highcharts без окрашивания всех баров в группе того же цвета?

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 истина, альтернативный цвета и прогресс, как я хочу, но вдруг обе полосы в каждой группе окрашены так такого же цвета.

Как использовать 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/