Question

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

echo (int)$bool_val;

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

Answer 1

根据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"});
        });
    }
}

为避免时间紧缩，请在图表更新后启动setExtremes（）。

通过调用.setExtremes（）方法或选择图表中的区域为轴设置最小值和最大值时触发。

//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 Gantt图表导航器颜色

2 个答案: