HighChart 时间戳突出显示现在的时间

Question

我使用 HighStock 库来显示带有 columnrange 的可用性日历。这是我的代码：

$(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
         }
     },
     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)
         }]
     }]
  });
});

JSFiddle Link

我想突出显示价格变动的当前时间戳 (hour/minutes)，例如，当前时间的一条红色垂直线。

可能吗？

谢谢！

Answer 1

正如 Pawel Fus 所说，我只需要使用 plotLines 选项。

yAxis: {
         type: 'datetime',
         title: {
             text: 'Timespan'
         },
         plotLines: [{
             value: Date.UTC(2013, 07, 02, 23, 30, 0),
             color: 'red',
             width: 2
         }]
     }

JSFiddle

Answer 2

你好Peter Krzywokulski,

通过为今天的时间创建一个新变量：

var today = new Date();

正如这里提到的那些人，创建一个情节线：

 plotLines: [{

                 value: today,
                 color: 'red',
                 width: 2
             }]

您可以在这里查看：JSFfiddle

祝你好运！

HighChart 时间戳突出显示现在的时间

HighChart timestamp highlight the time now

javascript

jquery

plot

highcharts