Highchart甘特图浏览器颜色

问题描述 投票:0回答:1

我正在渲染具有不同系列颜色的甘特图。颜色以某种方式未反映在底部的导航器上。如何在系列和导航器中显示相同的颜色?小提琴链接:Fiddle注意:这些颜色将是动态的,将基于不同的情况。因此,我希望它们也能动态地反映在导航器中。我正在像这样改变系列的颜色:

    chart: {
    events: {
        load: function() {
            Highcharts.each(this.series[0].points, function(p) {
            p.color = 'grey'
            });
        }
    }
  },

您可以看到系列颜色为灰色,但是在下面的导航器中,我看到了不同的颜色。

charts highcharts gantt-chart angular-gantt angular-highcharts
1个回答
0
投票

根据highcharts-gantt文档:

使用一系列新选项更新系列。为了干净,准确地处理新选项,将删除该系列中的所有方法和元素,并从头开始对其进行初始化。

一旦发生事件,您就应该遍历给定的意点并更改其选项(在您的情况下为“颜色”)。更改将在下面的时间轴中应用-示例代码在1.5秒后更改颜色。

//Updating the color
setTimeout(function() {
  for (var i = 0; i < chart.series[0].points.length; i++) {
    chart.series[0].points[i].update({
      color: "grey"
    });
  }
}, 1500);

Working example

在您的代码中为:

events: {
    load: function() {
        Highcharts.each(this.series[0].points, function(p) {
            p.update({color: "grey"});
        });
    }
}
© www.soinside.com 2019 - 2024. All rights reserved.