當鑽入圖表時，圖表系列顏色的更新失敗

Question

使用向下鑽取模塊和下拉以允許用戶更改顏色主題在圖表最初加載時按預期工作，並且用戶從下拉列表中選擇不同的顏色集。 該系列的顏色會在整個鑽孔路徑中發生變化並保持不變。 但是，如果用戶在任何級別的鑽孔中鑽取一系列，然后更改顏色集，則不會將其應用於當前可見的系列。 如果用戶然后鑽回到初始系列視圖，則存在新顏色。 我正在使用chart.update()來影響顏色更改，如下所示：

$.each(Highcharts.charts, function(index, value) {
  var chart = Highcharts.charts[index];
  chart.update({
    colors: themeOption.colors
  });
});

你可以在這個jsFiddle上測試這個問題。

這是我們數據的更真實的例子 。

如何在已經鑽取的情況下更新圖表系列顏色？

Answer 1

您可以使用指定的顏色更新每個點。

const colors = {
  'monoBlue': ['rgb(40,97,152)', 'rgb(57,114,169)', 'rgb(65,122,177)', 'rgb(74,131,186)', 'rgb(82,139,194)', 'rgb(90,147,202)', 'rgb(99,156,211)', 'rgb(107,164,219)', 'rgb(116,173,228)', 'rgb(124,181,236)', 'rgb(133,190,245)', 'rgb(141,198,253)', 'rgb(150,207,255)', 'rgb(158,215,255)', 'rgb(167,224,255)', 'rgb(175,232,255)', 'rgb(184,241,255)', 'rgb(192,249,255)', 'rgb(201,255,255)'],
  'monoGreen': ['rgb(60,153,41)', 'rgb(77,170,58)', 'rgb(85,178,66)', 'rgb(94,187,75)', 'rgb(102,195,83)', 'rgb(110,203,91)', 'rgb(119,212,100)', 'rgb(127,220,108)', 'rgb(136,229,117)', 'rgb(144,237,125)', 'rgb(153,246,134)', 'rgb(161,254,142)', 'rgb(170,255,151)', 'rgb(178,255,159)', 'rgb(187,255,168)', 'rgb(195,255,176)', 'rgb(204,255,185)', 'rgb(212,255,193)', 'rgb(221,255,202)'],
  'monoRed': ['rgb(195,44,0)', 'rgb(212,61,2)', 'rgb(220,69,10)', 'rgb(229,78,19)', 'rgb(237,86,27)', 'rgb(245,94,35)', 'rgb(254,103,44)', 'rgb(255,111,52)', 'rgb(255,120,61)', 'rgb(255,128,69)', 'rgb(255,137,78)', 'rgb(255,145,86)', 'rgb(255,154,95)', 'rgb(255,162,103)', 'rgb(255,171,112)', 'rgb(255,179,120)', 'rgb(255,188,129)', 'rgb(255,196,137)', 'rgb(255,205,146)'],
  'multi': ['#1f78b4', '#50B432', '#ff7f00', '#AA4643', '#a6cee3', '#DDDF00', '#64E572', '#fdbf6f', '#ffff99', '#24CBE5', '#6a3d9a', '#cab2d6', '#b15928', '#fb9a99']
}

console.log(colors)

const options = {
    chart: {
    type: 'column'
  },
    series: [{
    data: [...Array(5)].map((u, i) => ({ y: Math.random() })),
  }, {
    data: [...Array(5)].map((u, i) => ({y: Math.random(), color: colors['monoGreen'][i]})),
  }]
}

const chart = Highcharts.chart('container', options)

// Update your chart colors
setTimeout(() => {
    chart.series[0].data.forEach((p, i) => p.update({color: colors.multi[i]}))
}, 2000)

實例： https ： //jsfiddle.net/rv4cz3cu/