2014-09-29 70 views
0

我正在編寫一個動態圖表(監視器應用程序),其中xAxis是日期時間類型,每三秒我從數據庫中提取數據併爲每個系列添加新點(迄今爲止這麼好)。這個問題帶有刻度,我每次添加一個新的時間點所有蜱蟲取當前時間,而不是保持其原始值時,他們創造了這個是我的代碼如何動態添加xAxis.tick

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); 

所以,問題是,我在做什麼錯?或者我錯過了什麼?

回答

0

它是引起本線:

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

new Date()將創建Date對象實際時間。然後,您在刻度標籤中爲每個標籤使用該日期。簡單地使用:

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

它沒有工作,現在它提示19:00:00爲每個滴答,無論時間是什麼時間。這是以前的情況,以及爲什麼我將這些行添加到新日期() – 2014-09-30 14:01:01

+0

但是爲什麼'new Date()'?它總是返回實際的時間..我認爲問題是你有這樣的數據:'數據:[0,0,0,0,0,0,0,0,0,0,0,0,0 ,0]' - 其中每個點的時間戳(日期)增加1ms .. – 2014-09-30 15:31:22

+0

好吧,那種有道理,我做這個的唯一原因是「[0,0,0,0,0,0,0 ,0,0,0,0,0,0,0]「是爲了創建20個記號,你將如何初始化這個圖表? – 2014-09-30 18:51:42