Question

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

class Something extends React.Component {
    changeName = () => {
        // Works
    }

    render() {
        // Add input, div or something with onChange or onClick
    }
}

export default Something

我试试，但失败了

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

它甚至不会给我任何调试错误。

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

MYFILE.TXT

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

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:///从文件系统运行文件，而不是（本地）Web服务器，但是ajax出于安全原因，请求在此环境中不可执行。

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

1 个答案: