CanvasJs图表未呈现

如何解决CanvasJs图表未呈现

我的图表未呈现。当我加载页面时，它仅显示白色背景。我不知道该如何调试。有人可以帮忙吗？

<!DOCTYPE HTML>
<html>
<body>
<div id="chartContainer" style="height: 500px; width: 50%;"></div>
</body>
<head>
  <script type="text/javascript" 
  src="https://canvasjs.com/assets/script/canvasjs.min.js">


          var chart = new CanvasJS.Chart("chartContainer",{
              data: [
                  {
                      type: "column",dataPoints: [
                          { x: 10,y: 10 },{ x: 20,y: 15 },{ x: 30,y: 25 },{ x: 40,y: 30 },{ x: 50,y: 28 }
                      ]
                  }
              ]
          });

          chart.render();

  </script>
</head>
</html>

解决方法

您需要编写正确的HTML代码并添加window.onload处理程序以在页面加载后立即运行代码：

<!DOCTYPE html>
<html>
<head>
    <title>Canvas test</title>
</head>
<body>
    <div id="chartContainer" style="height: 500px; width: 50%;"></div>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <script type="text/javascript">
        
        window.onload = function () {

        var chart = new CanvasJS.Chart("chartContainer",{
            data: [
                {
                    type: "column",dataPoints: [
                        { x: 10,y: 10 },{ x: 20,y: 15 },{ x: 30,y: 25 },{ x: 40,y: 30 },{ x: 50,y: 28 }
                    ]
                }
            ]
        });

        chart.render();

        }
    </script>
</body>
</html>

UPD 。不带window.onload的示例（不要忘记在实际代码之前导入canvasjs）

var chart = new CanvasJS.Chart("chartContainer",{
  data: [
    {
      type: "column",dataPoints: [
        { x: 10,y: 28 }
      ]
    }
  ]
});

chart.render();

<div id="chartContainer" style="height: 500px; width: 50%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

尝试这种希望能奏效的

<html>
<head>  
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer",{
              data: [
                  {
                      type: "column",dataPoints: [
                          { x: 10,y: 28 }
                      ]
                  }
              ]
          });
          chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

结果