我想在记事本++中运行这段代码[关闭]答案

【问题标题】：I want to run this code in Nodepad++ [closed]我想在记事本++中运行这段代码[关闭]
【发布时间】：2019-01-11 23:46:30
【问题描述】：

<!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 数据可以通过的图表。

我该怎么做？

【问题讨论】：

您的括号不匹配。使用browser console (dev tools)（点击F12）并阅读任何错误。使用JSHint 之类的工具可以立即发现代码中的问题。
@Xufox 你能修正错误吗？

标签： javascript html canvasjs

【解决方案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>

【讨论】：

感谢您的帮助@nathan stockton :)