javascript canvasjs 从file.txt动态获取数据点

Question

Objective:

我想从 file.txt 获取数据，这些数据保存在本地 /var/www/html/file.txt 中，并以 2 秒的间隔动态地将其用于我网页上的圆环图

file.txt 只有一个条目，看起来像：

我试过的javascript：

$.get("file.txt", function(data) {
var x = 0;
var allLines = data.split('\n');
if(allLines.length > 0) {
    for(var i=0; i< allLines.length; i++) {
        dataPoints.push({y: parseInt(allLines[i])});
        x += .25;
    }
}
var chart = new CanvasJS.Chart("chartContainer",{
    title :{
        text: "Chart using Text File Data"
    },
    data: [{
        type: "doughnut",
        dataPoints : dataPoints,
    }]
});
chart.render();
});
}

整个html看起来像

<!DOCTYPE html>
<html>
<head>
  <title>Chart using txtfile Data</title>
  <script type="text/javascript" src="http://canvasjs.com/assets/script            /jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
 <script type="text/javascript">
$.get("graph.txt", function(data) {
var xVal = 0;
var allLines = data.split('\n');
var chart = new CanvasJS.Chart("chartContainer",{
    title :{
        text: "Chart using Text File Data"
    },
    data: [{
        type: "line",
        dataPoints : [function()
        {
        if(allLines.length > 0) {
           for(var i=0; i< allLines.length; i++) {
           xVal +=.25;
           dataPoints.push({x : xVal, y: parseInt(allLines[i])});
    }
}
}]
    }]
});
chart.render();
},'text');
</script>
<script type="text/javascript" src="canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>

Answer 1

我相信这样的事情可能对你有用。您可能不得不使用 Firefox，因为 Chrome 不喜欢跨源请求

首先，dataPoints 是未定义的，我将代码移到了 dataPoints 中的一个函数中。我将您的变量名从 x 更改为 xVal。添加了 'text' 字，这样 $get 就知道它正在读取什么格式，而且看起来还有一个额外的括号。试试这个。

    $.get("graph.txt", function(data) {
var xVal = 0;
var allLines = data.split('\n');
var dps = [];

for(var i=0; i< allLines.length; i++) {
   xVal +=.25;
   dps.push({x : xVal, y: Number(allLines[i])});
}

var chart = new CanvasJS.Chart("chartContainer",{
    title :{
        text: "Chart using Text File Data"
    },
    data: [{
        type: "line",
        dataPoints : dps
    }]
});
chart.render();
},'text');

javascript canvasjs 从file.txt动态获取数据点

javascript canvasjs Get data points dynamically from file.txt

canvasjs