Highchart 甘特图导航器颜色

Question

我正在渲染具有不同系列颜色的甘特图。颜色不知何故没有反映在底部的导航器上。如何在系列和导航器中显示相同的颜色？ Fiddle link : Fiddle 注意：这些颜色将是动态的，这将基于不同的情况。所以我希望它们也能动态地反映在导航器中。我正在改变系列的颜色：

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

如您所见，系列颜色为灰色，但在下面的导航器中，我看到了不同的颜色。

Answer 1

根据 highcharts-gantt 文档：

Update the series with a new set of options. For a clean and precise handling of new options, all methods and elements from the series are removed, and it is initialized from scratch.

在比赛中，您应该通过给定的意甲积分并更改其选项（在您的情况下 'color'）。更改将应用在下面的时间轴中 - 示例代码在 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"});
        });
    }
}

为避免时间线缩短 - 在图表更新后启动 setExtremes()。

Fires when the minimum and maximum is set for the axis, either by calling the .setExtremes() method or by selecting an area in the chart.

//Fully selected timeline
this.xAxis[0].setExtremes();

Working example - timeline selection

Answer 2

您还可以设置导航器系列的选项，如下所示：

navigator: {
    series: {
        ...,
        colorByPoint: false,
        color: 'grey'
    },
    ...
}

现场演示： https://jsfiddle.net/BlackLabel/c4j9dvqx/

API参考：https://api.highcharts.com/gantt/navigator.series.color

Highchart 甘特图导航器颜色

Highchart Gantt chart Navigator color

charts

highcharts

gantt-chart

angular-gantt

angular-highcharts