High-Chart диаграмма x-range, расширяющая точку данных без конца

Question

У меня есть верхняя диаграмма x-range, которая используется для отображения временной шкалы события. Я был в состоянии заставить это работать для событий, у которых есть дата начала и окончания. Но у меня есть события, которые еще не закончились, и для них мне нужно расширить точку данных диаграммы, не останавливаясь, как показано ниже. Зеленое событие еще не закончено.

Ниже приведен мой существующий код:

Highcharts.chart('container', {
    chart: {
        type: 'xrange',
        height: 100
    },
    title: {
        text: ''
    },
    xAxis: {
        visible: true,
        tickLength: 0,
        lineWidth: 6,
        lineColor: '#000',
        labels: {
            enabled: false
        }
    },
    yAxis: {
        visible: false
    },
    legend: {
        enabled: false
    },
    series: [{
        name: '',
        borderRadius: 0,
        pointPadding: 0,
        borderWidth: 6,
        groupPadding: 0,
        data: [{
            x: Date.UTC(2014, 10, 21),
            x2: Date.UTC(2014, 11, 2),
            y: 0,
            color: 'transparent',
            borderColor: 'rgba(230, 141, 11, 0.5)'
        }, {
            x: Date.UTC(2014, 10, 26),
            x2: Date.UTC(2014, 11, 5),
            y: 0,
            color: 'transparent',
            borderColor: 'rgba(228, 53, 70, 0.5)'
        }, {
            x: Date.UTC(2014, 11, 8),
            x2: Date.UTC(2014, 11, 10),
            y: 0,
            color: 'transparent',
            borderColor: 'rgba(40, 167, 69, 0.5)'
        }, {
            x: Date.UTC(2014, 11, 9),
            x2: Date.UTC(2014, 11, 12),
            y: 0,
            color: 'transparent',
            borderColor: 'rgba(40, 147, 164, 0.5)'
        }],
        dataLabels: {
            enabled: false
        }
    }]

});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>

<div id="container"></div>

Я пытался поставить Date.UTC(0, 0, 0) для x2, но это не сработало, как ожидалось. Возможно ли это с графиками Xrange в старших. Заранее спасибо!

Answer 1

Вы можете установить значение x2 на более позднюю дату, чем xAxis.max:

xAxis: {
    ...,
    max: Date.UTC(2014, 11, 5)
},
...,
series: [{
    data: [{
        x: Date.UTC(2014, 10, 26),
        x2: Date.UTC(2014, 11, 15),
        ...
    }],
    ...
}]

Демонстрационная версия: http://jsfiddle.net/BlackLabel/9f6Lejbs/

Справочник по API: https://api.highcharts.com/highcharts/xAxis.max