CanvasJs動態圖表不會從文件讀取時得到更新

我一直在試圖獲得一個使用CanvasJs的動態圖表。我有一個文件被更新（通過另一個程序），我想每次有新記錄時更新我的圖表。CanvasJs動態圖表不會從文件讀取時得到更新

我見過這個example（上圖），我試圖做同樣的事情，但我實際上是從文件中讀取數據。

這裏是我的代碼：

<!DOCTYPE HTML> 
<html> 
<head> 
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script> 
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> 
    <script type="text/javascript"> 
     window.onload = function() { 

     var dps = [{x: new Date(2017, 04, 20, 07, 20, 00), y: 30}]; //dataPoints. 

     var chart = new CanvasJS.Chart("chartContainer",{ 
     title:{ 
     text: " Cooling Machine Status " 
     }, 

     axisX:{  

      valueFormatString: "DD-MM-YY HH:mm:ss" , 
      labelAngle: -50 
     }, 

     axisY:{ 
      title: "Cooling Temperature (F)" 
     }, 
     data: [{ 
      type: "line", 
      showInLegend: true, 
      name: "Temperature", 
      dataPoints : dps 
     }] 
     }); 

     chart.render(); 

     var updateChart = function() { 

     var rawFile = new XMLHttpRequest(); 
     rawFile.open("GET","/analyticResults/coolingMachine.csv", true); 
     rawFile.onreadystatechange = function() 
     { 
      if(rawFile.readyState === 4) 
      { 
       if(rawFile.status === 200 || rawFile.status == 0) 
        { 
        var dps = csvLines = points = []; 
        csvLines = rawFile.responseText.split(/[\r?\n|\r|\n]+/);   

        for (var i = 0; i < csvLines.length; i++) 
         if (csvLines[i].length > 0) { 
          points = csvLines[i].split(","); 
          var dateTime = points[0].split(" ");//dateTime[0] = date, dateTime[1] = time 
          var date = dateTime[0].split("-"); 
          var time = dateTime[1].split(":"); 

          dps.push({ 
           x: new Date(date[2], date[1], date[0], time[0], time[1], time[2]), 
           y: parseFloat(points[1])  
          }); 
         } 
        } 
      } 
     }; 
     rawFile.send(null); 

     if (dps.length > 10) 
     { 
      dps.shift();     
     } 
     chart.render(); 
    }; 



setInterval(function(){updateChart()}, 1000); 
} 
</script> 
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> 
</head> 
<body> 
    <div id="chartContainer" style="height: 300px; width: 70%;"> 
    </div> 
</body> 
</html>

當我調試的JavaScript，我可以看到，值在DPS得到推但圖表不更新......

我錯過成才？

謝謝您的時間

來源

2017-08-03 AsmaaM

你是路過的dps排行榜數據點。但同時你正在推動在updateChart方法中本地聲明的dps。在updateChart方法中去除dps聲明應該適用於你的情況。

來源

2017-08-04 05:40:24

是的，我沒有注意到這一點！謝謝你，先生 – AsmaaM

CanvasJs動態圖表不會從文件讀取時得到更新

回答

相關問題