的JavaScript canvasjs从file.txt的

动态获取的数据点

我想从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>

来源

2017-02-15 theloosegoos

我相信这样的事情可能会为你工作。您可能必须使用Firefox，因为Chrome不喜欢跨源请求

首先，dataPoints未定义，我将代码移入dataPoints中的函数。我将变量名称从x更改为xVal。添加了'文本'这个词，这样$ 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');

来源

2017-02-15 19:43:46 sjramsay

感谢您的回复。我不能理解代码产生的空行图，我已经将整个html添加到原始文章中。 – theloosegoos

我将代码稍微改了一步，先将值推入数组，然后将该数组添加到数据点。另一个问题是我不得不将allLines [i]对象转换为数字。我测试了它，现在显示线 – sjramsay

它非常完美，非常感谢。这也是一次学习经历，因为我可以看到如何解决问题。 – theloosegoos

的JavaScript canvasjs从file.txt的

回答

相关问题