Получение точек данных для canvasjs из текстового файла

Я пытаюсь сделать диаграмму, которая динамически получает значения графика из файла.txt. Здесь я могу создать простую диаграмму с canvasjs. Это именно тот тип диаграммы, который мне нужно сделать, за исключением того, что он должен динамически получать значения x из файла.txt.

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

56
Источник

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-запросы не выполняются в этой среде по соображениям безопасности.

Источник
Другие вопросы по тегам