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

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

<!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

来源

2017-02-14 theloosegoos

你的MYFILE.txt的内容是什么？ – Connum

你为什么要加载canvasjs以及jquery.canvasjs？这是canvasjs的要求（我不知道图书馆）？ – Connum

下面是一个工作的jsfiddle，只是将ajax请求替换为硬编码的假数据：https：//jsfiddle.net/ye2yeers/，因此它必须是您的ajax请求失败。我看不到在标记中包含jQuery的位置？你确定该文件存在吗？该请求是否显示在开发工具的网络选项卡中，如果是，它是什么样子的？ – Connum

由于这个代码，其中我只替换硬编码的数据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:///在浏览器中运行，从文件系统中的文件，而不是（本地）web服务器，但出于安全原因，在此环境中ajax请求不可执行。

来源

2017-02-14 15:44:16 Connum

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

回答

相关问题