Можно ли изменить цвет линии для графика времени между конкретными точками? - PullRequest
Новая
       32

Можно ли изменить цвет линии для графика времени между конкретными точками?

0 голосов
/ 09 ноября 2019

enter image description here

На изображении выше я хотел бы иметь точки от индекса 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);
            }
          }
        }
    }]
});

Я пытался добавить Зону, но для графика времени я нахожу, что нет никакой опции зоны. Есть ли способ добавить цвет линии, например, зону.

Как мы можем сделать временную диаграмму, как изображение, которое я предоставляю.

Заранее спасибо

1 Ответ

0 голосов
/ 11 ноября 2019

Вы можете использовать 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

...