Question

<!DOCTYPE HTML>
    <html>
    <head>
    <script>

    window.onload = function () {

    var dps1 = [], dps2 = [], dps3 = [];

    var chart = new CanvasJS.Chart("chartContainer",{
      title:{
        text: "TIME vs. Movement category"
      },
      axisX:{
        title: "TIME SLOT"
      },
      axisY:{
        title: "% of Movement Category"
      },
      data: [
        {
          type: "stackedArea100",
          name: "Standstill/Tilting",
          showInLegend: "true",
          yValueFormatString: "#,##0.##\"%\"",
          dataPoints: dps1
        },
        {
          type: "stackedArea100",
          name: "On Foot",
          showInLegend: "true",
          yValueFormatString: "#,##0.##\"%\"",
          dataPoints: dps2
        },
        {
          type: "stackedArea100",
          name: "On Vehicle",
          showInLegend: "true",
          yValueFormatString: "#,##0.##\"%\"",
          dataPoints: dps3
        }
      ]
    });

    getData();
    chart.render();

    function getData(chart) {

      $.when($.getJSON("https://api.myjson.com/bins/cxvmo", function(data) {

        for(var i = 0; i < data.length; i++) {
          dps1.push({
            label: data[i].label,
            y: data[i].y1
        });
          dps2.push({
            label: data[i].label,
            y: data[i].y2
        });
          dps3.push({
            label: data[i].label,
            y: data[i].y3
        });
        }
      })).done(function(){
        chart.render();
      });
    }

    setInterval(function(){
      getData();
      chart.render();
    }, 100000);
    </script>
    </head>
    <body>
    <br/>
    <div id="chartContainer" style="height: 600px; width: 100%;"></div>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    </body>
    </html>

此代码的问题在哪里？为什么它没有运行？我想运行此编码，以显示实时JSON数据可以通过的图形。

我该怎么做？

Answer 1

一些问题。

您正在window.onload函数范围内声明变量；如果希望它们是全局的，则必须在函数外部声明它们。

您尚未关闭window.onload功能

<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

var dps1 = dps2 = dps3 = [];
var chart;
window.onload = function () {
 chart = new CanvasJS.Chart("chartContainer",{
  title:{
    text: "TIME vs. Movement category"
  },
  axisX:{
    title: "TIME SLOT"
  },
  axisY:{
    title: "% of Movement Category"
  },
  data: [
    {
      type: "stackedArea100",
      name: "Standstill/Tilting",
      showInLegend: "true",
      yValueFormatString: "#,##0.##\"%\"",
      dataPoints: dps1
    },
    {
      type: "stackedArea100",
      name: "On Foot",
      showInLegend: "true",
      yValueFormatString: "#,##0.##\"%\"",
      dataPoints: dps2
    },
    {
      type: "stackedArea100",
      name: "On Vehicle",
      showInLegend: "true",
      yValueFormatString: "#,##0.##\"%\"",
      dataPoints: dps3
    }
  ]
});

getData();
chart.render();
}

function getData(chart) {

  $.when($.getJSON("https://api.myjson.com/bins/cxvmo", function(data) {

    for(var i = 0; i < data.length; i++) {
      dps1.push({
        label: data[i].label,
        y: data[i].y1
    });
      dps2.push({
        label: data[i].label,
        y: data[i].y2
    });
      dps3.push({
        label: data[i].label,
        y: data[i].y3
    });
    }
  })).done(function(){
    chart.render();
  });
}

setInterval(function(){
  getData();
  chart.render();
}, 100);
</script>
</head>
<body>
<br/>
<div id="chartContainer" style="height: 600px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

我想在Nodepad ++

1 个答案: