javascript - 深入图表时图表系列颜色更新失败

Question

当图表最初加载并且用户从下拉列表中选择不同的颜色集时，使用钻取模块和下拉列表允许用户更改颜色主题可以按预期工作。该系列的颜色会变化并在整个钻孔路径中保持不变。但是，如果用户在任何钻取级别钻取到系列，然后更改颜色集，则它不会应用于当前可见的系列。如果用户随后返回到初始系列 View ，则会出现新颜色。我正在使用 chart.update() 来影响颜色变化，如下所示:

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

您可以在此 jsFiddle 上测试此问题.

这是一个更真实的世界example我们的数据。

如何在已钻取的情况下更新图表系列颜色？

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/