时间戳

首页 > 解决方案 > 是否可以在特定点之间更改时间线图的线条颜色？

highcharts - 是否可以在特定点之间更改时间线图的线条颜色？

问题描述

在此处输入图像描述

在上图中，我想在时间线高图中将索引 2 到 3 的点设为红色。请帮我。

这是代码示例：

Highcharts.wrap(Highcharts.Tooltip.prototype, 'hide', function(proceed) {});

Highcharts.wrap(Highcharts.Tooltip.prototype, 'refresh', function(proceed, point, event, click) {
  if (click) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
  }
});

Highcharts.chart('container', {
    chart: {
        zoomType: 'x',
        type: 'timeline',
        events: {
        load: function(e) {
          this.series[0].points[2].select();
        }
      }
    },
    xAxis: {
        type: 'datetime',
        visible: false
    },
    yAxis: {
        gridLineWidth: 1,
        title: null,
        labels: {
            enabled: false
        }
    },
    legend: {
        enabled: false
    },
    title: {
        text: ''
    },
    subtitle: {
        text: ''
    },
    tooltip: {
        style: {
            width: 300
        }
    },
    series: [{
        dataLabels: {
            allowOverlap: false,
            enabled: false,
            format: ''
        },
        marker: {
            symbol: 'circle',
            fillColor: '#1B7A92'
        },
        data: [{
            x: Date.UTC(1951, 5, 22),
            name: 'First dogs in space',
            label: 'First dogs in space',
            description: "Dezik and Tsygan were the first dogs to make a sub-orbital flight on 22 July 1951. Both dogs were recovered unharmed after travelling to a maximum altitude of 110 km."
        }, {
            x: Date.UTC(1957, 9, 4),
            name: 'First artificial satellite',
            label: 'First artificial satellite',
            description: "Sputnik 1 was the first artificial Earth satellite. The Soviet Union launched it into an elliptical low Earth orbit on 4 October 1957, orbiting for three weeks before its batteries died, then silently for two more months before falling back into the atmosphere."
        }, {
            x: Date.UTC(1959, 0, 4),
            name: 'First artificial satellite to reach the Moon',
            label: 'First artificial satellite to reach the Moon',
            description: "Luna 1 was the first artificial satellite to reach the Moon vicinity and first artificial satellite in heliocentric orbit."
        }, {
            x: Date.UTC(1961, 3, 12),
            name: 'First human spaceflight',
            label: 'First human spaceflight',
            description: "Yuri Gagarin was a Soviet pilot and cosmonaut. He became the first human to journey into outer space when his Vostok spacecraft completed one orbit of the Earth on 12 April 1961."
        }],    
        point: {
          events: {
            click: function(e) {
              this.series.chart.tooltip.refresh(this, e, true);
            }
          }
        }
    }]
});

我尝试添加区域，但对于时间线图，我发现没有区域选项。有什么方法可以添加像 zone.d 那样的线条颜色。

我们如何制作像我提供的图像一样的时间线图。

提前致谢

标签： highchartstimelineangular2-highcharts

解决方案

您可以使用zones：

series: [{
    zones: [{
        value: Date.UTC(1959, 0, 4),
        color: 'blue'
    }, {
        color: 'red'
    }],
    zoneAxis: 'x',
    ...
}]

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

API 参考： https ://api.highcharts.com/highcharts/series.line.zones

推荐阅读