Как добавить xAxis.tick динамически

Question

Я кодирую динамическую диаграмму (приложение монитора), которая xAxis является типом даты и времени, каждые три секунды я извлекаю данные из БД и добавляю новую точку для каждой серии (насколько это хорошо). Проблема возникает с галочкой, каждый раз, когда я добавить новый пункт все тики взять текущее время вместо того, чтобы их первоначальное значение, когда они были созданы, это мой код

var chart1Obj = { 
     chart: { 
      renderTo: 'welcome-chart', 
      type: 'line', 
      animation: Highcharts.svg, // don't animate in old IE 
      // marginRight: 10, 
      events: { 
       load: function() { 
        // set up the updating of the chart each second 
        var series = this.series; 
        setInterval(function() { 
         Meteor.call("getGraphData", function (error, json) { 
          if (error) { 
           console.error("Welcome.graphData() failed\n", error); 
          } else { 
           temp = JSON.parse(json); 
           series[0].addPoint([temp.running], true, true); 
           series[1].addPoint([temp.queued], true, true); 
           series[2].addPoint([temp.suspended], true, true); 
          } 
         }); 
        }, 3000); 
       } 
      } 
     }, 
     title: { 
      text: 'Job monitoring' 
     }, 
     xAxis: { 
      type: 'datetime', 
      tickPixelInterval: 150, 
      labels: { 
       formatter: function() { 
        var myTime = new Date(); 
        return Highcharts.dateFormat('%H:%M:%S', myTime.getTime()); 
       } 
      } 
     }, 
     yAxis: { 
      title: { 
       text: 'Number of Task' 
      }, 
      floor: 0, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
       }] 
     }, 
     exporting: { 
      enabled: false 
     }, 
     series: [{ 
      name: 'Running', 
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
      width: 1, 
      color: '#00FF00' 
     }, { 
      name: 'Queued', 
      width: 2, 
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
      color: '#FFFF00' 
     }, { 
      name: 'Suspended', 
      width: 3, 
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
      color: '#FF0000' 
     }] 
    }; 

    Highcharts.setOptions({ 
     global: { 
      useUTC: false, 
     } 
    }); 
    var chart1 = new Highcharts.Chart(chart1Obj); 

поэтому вопрос, что я делаю неправильно ? или что мне не хватает?

Answer 1

Это вызвано этой линии:

 labels: { 
      formatter: function() { 
       var myTime = new Date(); 
       return Highcharts.dateFormat('%H:%M:%S', myTime.getTime()); 
      } 
     } 

new Date() создаст объект даты с фактического времени. Затем вы используете эту дату для каждой метки в ярлыках меток. просто используйте:

return Highcharts.dateFormat('%H:%M:%S', this.value);