从文件读取时，带有 CanvasJs 的动态图表不会更新

Question

我一直在尝试使用 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 中被推送，但图表没有更新...

我错过了什么吗？

感谢您的宝贵时间

Answer 1

您正在将 dps 传递给图表数据点。但与此同时，您正在推送在 updateChart 方法中本地声明的 dps。在 updateChart 方法中删除 dps 声明应该适用于您的情况。

从文件读取时，带有 CanvasJs 的动态图表不会更新

Dynamic chart with CanvasJs doesn't get update while reading from a file

javascript

jquery

canvasjs