从文本文件获取 canvasjs 的数据点

Question

我正在尝试制作一个从 .txt 文件中动态获取绘图值的图表。在这里，我可以使用 canvasjs 生成一个简单的图表，这正是我需要制作的图表类型，除了它应该动态地从 .txt 文件中获取 x 值。

<!DOCTYPE HTML>
<html>
<head>
  <script type="text/javascript">
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
        text: "Percents",
       fontFamily: "Impact",
        fontWeight: "normal"
      },

      legend:{
        verticalAlign: "bottom",
        horizontalAlign: "center"
      },
      data: [
      {
        //startAngle: 45,
       indexLabelFontSize: 20,
       indexLabelFontFamily: "Garamond",
       indexLabelFontColor: "darkgrey",
      indexLabelLineColor: "darkgrey",
       indexLabelPlacement: "outside",
       type: "doughnut",
       showInLegend: true,
       dataPoints: [
       {  y: 55, legendText:"55%", indexLabel: "55%" },
       {  y: 45, legendText:"45%", indexLabel: "45%" },
       ]
     }
     ]
   });

     chart.render();
   }
   </script>
   <script type="text/javascript" src="canvasjs.min.js"></script></head>
     <body>
       <div id="chartContainer" style="height: 300px; width: 100%;">
       </div>
     </body>
 </html>

我在这里尝试但失败了

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="jquery.canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var dataPoints = [];

//Replace text file's path according to your requirement.
$.get("MYFILE.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({x: x , y: parseInt(allLines[i])});
        x += .25;
    }
}
var chart = new CanvasJS.Chart("chartContainer",{
    title :{
        text: "Chart using Text File Data"
    },
    data: [{
        type: "line",
        dataPoints : dataPoints,
    }]
});
chart.render();
});
}
</script>
<script type="text/javascript" src="canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>

它甚至没有给我任何调试错误。

编辑：.TXT 文件的内容非常简单

MYFILE.txt

Answer 1

我只用硬编码数据替换了 ajax 请求的这段代码正在运行，它一定是 ajax 请求本身的问题。

var dataPoints = [];

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/jquery.canvasjs.min.js"></script>

<div id="chartContainer" style="height: 300px; width: 100%;"></div>

正如我们在评论中发现的那样，正如我所假设的那样，您正在尝试通过 file:/// 在浏览器中运行文件系统中的文件，而不是（本地) 网络服务器，但出于安全原因，ajax 请求在此环境中不可执行。

从文本文件获取 canvasjs 的数据点

Getting Data points for canvasjs from a text file

javascript

canvasjs