Question

使用向下钻取模块和下拉按钮以允许用户更改颜色主题在图表最初加载时按预期工作，并且用户从下拉列表中选择不同的颜色集。该系列＆＃39;颜色改变并在整个钻孔路径中保持不变。但是，如果用户在任何级别的钻孔中钻取一系列，然后更改颜色集，则不会将其应用于当前可见的系列。如果用户然后钻回到初始系列视图，则存在新颜色。我使用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/

当钻入图表时，图表系列颜色的更新失败

1 个答案: