График временной шкалы с горизонтальной прокруткой

Question

Ссылка на вопрос ниже относительно графика времени -> Как я могу склеить линии на временной шкале Highcharts?

Я восстановил это в jsfiddle -> http://jsfiddle.net/0hafgqys/

Мой следующий вопрос: как сделать так, чтобы он имел горизонтальную прокрутку, если я хочу вернуться назад во времени, предполагая, что у меня есть исторические данные

$(function () {
 $('#container').highcharts({

     chart: {
         type: 'columnrange',
         inverted: true
     },
     title: {
         text: 'Equipment Status'
     },
     scrollbar: {
         enabled: true
     },
     xAxis: {
         categories: ['Status']
     },
     yAxis: {
         type: 'datetime',
         title: {
             text: 'Timespan'
         }
     },
     plotOptions: {
         columnrange: {
             grouping: false ,   borderWidth:0,
         }

     },
     legend: {
         enabled: true
     },
     tooltip: {
         formatter: function () {
             return '<b>' + this.x + ' - ' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%e %B %H:%M', this.point.low) +
                 ' - ' + Highcharts.dateFormat('%B %e %H:%M', this.point.high) + '<br/>';
         }
     },

     series: [{
         name: 'Producing',
         data: [{
             x: 0,
             low: Date.UTC(2013, 07, 03, 0, 0, 0),
             high: Date.UTC(2013, 07, 03, 4, 0, 0)
         }, {
             x: 0,
             low: Date.UTC(2013, 07, 03, 10, 0, 0),
             high: Date.UTC(2013, 07, 03, 12, 0, 0)
         }, {
             x: 0,
             low: Date.UTC(2013, 07, 03, 14, 0, 0),
             high: Date.UTC(2013, 07, 03, 15, 0, 0)
         }

         ]
     }, {
         name: 'Breakdown',
         data: [{
             x: 0,
             low: Date.UTC(2013, 07, 03, 4, 0, 0),
             high: Date.UTC(2013, 07, 03, 10, 0, 0)
         }, {
             x: 0,
             low: Date.UTC(2013, 07, 03, 18, 0, 0),
             high: Date.UTC(2013, 07, 03, 24, 0, 0)
         }]
     }, {
         name: "Changeover",
         data: [{
             x: 0,
             low: Date.UTC(2013, 07, 04, 1, 0, 0),
             high: Date.UTC(2013, 07, 04, 5, 0, 0)
         }, {
             x: 0,
             low: Date.UTC(2013, 07, 02, 10, 0, 0),
             high: Date.UTC(2013, 07, 02, 23, 0, 0)
         }, ]
     }, {
         name: "TrialRun",
         data: [{
             x: 0,
             low: Date.UTC(2013, 07, 04, 5, 0, 0),
             high: Date.UTC(2013, 07, 04, 13, 0, 0)
         }, {
             x: 0,
             low: Date.UTC(2013, 07, 02, 2, 0, 0),
             high: Date.UTC(2013, 07, 02, 10, 0, 0)
         }]
     }]
 });
});

Answer 1

Если вы измените columnrange на xrange тип серии, вы сможете использовать значения по умолчанию navigator и scrollbar в xAxis:

 $('#container').highcharts({
     chart: {
         type: 'xrange'
     },
     ...,

     series: [{
         name: 'Producing',
         data: [{
                 y: 0,
                 x: Date.UTC(2013, 07, 03, 0, 0, 0),
                 x2: Date.UTC(2013, 07, 03, 4, 0, 0)
             }, {
                 y: 0,
                 x: Date.UTC(2013, 07, 03, 10, 0, 0),
                 x2: Date.UTC(2013, 07, 03, 12, 0, 0)
             }, ...

         ]
     }, ... ]
 });

Документах: https://www.highcharts.com/docs/chart-and-series-types/x-range-series

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

Answer 2

Я понял .... посмотрите пересмотренный код ниже и jsfiddle -> http://jsfiddle.net/0hafgqys/1/

$(function () {
     $('#container').highcharts({

         chart: {
             type: 'columnrange',
             inverted: true
         },
         title: {
             text: 'Equipment Status'
         },

         xAxis: {
             categories: ['Status']
         },
         yAxis: {
             type: 'datetime',
             title: {
                 text: 'Timespan'
             },
         min :    Date.UTC(2013, 07, 04, 13, 0, 0) - (24*60*60*1000),
          scrollbar: {
             enabled: true
         },            
         },
         plotOptions: {
             columnrange: {
                 grouping: false ,   borderWidth:0,
             }

         },
         legend: {
             enabled: true
         },
         tooltip: {
             formatter: function () {
                 return '<b>' + this.x + ' - ' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%e %B %H:%M', this.point.low) +
                     ' - ' + Highcharts.dateFormat('%B %e %H:%M', this.point.high) + '<br/>';
             }
         },

         series: [{
             name: 'Producing',
             data: [{
                 x: 0,
                 low: Date.UTC(2013, 07, 03, 0, 0, 0),
                 high: Date.UTC(2013, 07, 03, 4, 0, 0)
             }, {
                 x: 0,
                 low: Date.UTC(2013, 07, 03, 10, 0, 0),
                 high: Date.UTC(2013, 07, 03, 12, 0, 0)
             }, {
                 x: 0,
                 low: Date.UTC(2013, 07, 03, 14, 0, 0),
                 high: Date.UTC(2013, 07, 03, 15, 0, 0)
             }

             ]
         }, {
             name: 'Breakdown',
             data: [{
                 x: 0,
                 low: Date.UTC(2013, 07, 03, 4, 0, 0),
                 high: Date.UTC(2013, 07, 03, 10, 0, 0)
             }, {
                 x: 0,
                 low: Date.UTC(2013, 07, 03, 18, 0, 0),
                 high: Date.UTC(2013, 07, 03, 24, 0, 0)
             }]
         }, {
             name: "Changeover",
             data: [{
                 x: 0,
                 low: Date.UTC(2013, 07, 04, 1, 0, 0),
                 high: Date.UTC(2013, 07, 04, 5, 0, 0)
             }, {
                 x: 0,
                 low: Date.UTC(2013, 07, 02, 10, 0, 0),
                 high: Date.UTC(2013, 07, 02, 23, 0, 0)
             }, ]
         }, {
             name: "TrialRun",
             data: [{
                 x: 0,
                 low: Date.UTC(2013, 07, 04, 5, 0, 0),
                 high: Date.UTC(2013, 07, 04, 13, 0, 0)
             }, {
                 x: 0,
                 low: Date.UTC(2013, 07, 02, 2, 0, 0),
                 high: Date.UTC(2013, 07, 02, 10, 0, 0)
             }]
         }]
     });
 });