Charts Highchart甘特图导航器颜色

Charts Highchart甘特图导航器颜色,charts,highcharts,gantt-chart,angular-gantt,angular-highcharts,Charts,Highcharts,Gantt Chart,Angular Gantt,Angular Highcharts,我正在渲染具有不同系列颜色的甘特图。颜色不知何故没有反映在底部的导航器上。如何在series和navigator中显示相同的颜色? 小提琴链接: 注意:这些颜色将是动态的,根据不同的情况而定。所以我希望它们也能动态地反映在导航器中。 我正在更改系列的颜色,如下所示: chart: { events: { load: function() { Highcharts.each(this.series[0].points, function(p)

我正在渲染具有不同系列颜色的甘特图。颜色不知何故没有反映在底部的导航器上。如何在series和navigator中显示相同的颜色? 小提琴链接: 注意:这些颜色将是动态的,根据不同的情况而定。所以我希望它们也能动态地反映在导航器中。 我正在更改系列的颜色,如下所示:

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

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

根据highcharts甘特图文档:

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

在比赛中,你们应该通过给定的系列赛分数,并改变它的选项(在你们的例子中是“颜色”)。 更改将应用于下面的时间线-示例代码在1,5秒后更改颜色

//更新颜色
setTimeout(函数(){
对于(var i=0;i

在您的代码中,它将是:

事件:{
加载:函数(){
Highcharts.each(本系列[0]。点,函数(p){
p、 更新({颜色:“灰色”});
});
}
}
为避免时间线收缩,请在图表更新后启动setextrems()

通过调用.setextrems()方法或选择图表中的区域,在为轴设置最小值和最大值时激发

//完全选定的时间线
this.xAxis[0].setextrems();

您还可以为一系列导航器设置选项,如下所示:

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

现场演示:


API参考:

这可以正常工作,但一旦图表更新,您可以在本例中看到范围选择器缩小。在我的例子中,范围选择器转到最右边。我如何保持它完好无损?