Javascript CanvasJs图表未呈现_Javascript_Charts_Html5 Canvas

Javascript CanvasJs图表未呈现

javascript charts html5-canvas

Javascript CanvasJs图表未呈现,javascript,charts,html5-canvas,Javascript,Charts,Html5 Canvas,我的图表无法渲染。当我加载页面时，它只显示白色背景。我不知道如何调试这个。有人能帮忙吗 <!DOCTYPE HTML> <html> <body> <div id="chartContainer" style="height: 500px; width: 50%;"></div> </body> <head> <script type="text/jav

我的图表无法渲染。当我加载页面时，它只显示白色背景。我不知道如何调试这个。有人能帮忙吗

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


var chart=new CanvasJS.chart（“chartContainer”{
数据：[
{
键入：“列”，
数据点：[
{x:10，y:10}，
{x:20，y:15}，
{x:30，y:25}，
{x:40，y:30}，
{x:50，y:28}
]
}
]
});
chart.render（）；

试试这个，希望能奏效

<html>
<head>  
<script>
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>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>


window.onload=函数（）{
var chart=new CanvasJS.chart（“chartContainer”{
数据：[
{
键入：“列”，
数据点：[
{x:10，y:10}，
{x:20，y:15}，
{x:30，y:25}，
{x:40，y:30}，
{x:50，y:28}
]
}
]
});
chart.render（）；
}

结果

您需要编写正确的HTML代码并添加

窗口。onload

处理程序在页面加载后立即运行代码：


帆布试验
window.onload=函数（）{
var chart=new CanvasJS.chart（“chartContainer”{
数据：[
{
键入：“列”，
数据点：[
{x:10，y:10}，
{x:20，y:15}，
{x:30，y:25}，
{x:40，y:30}，
{x:50，y:28}
]
}
]
});
chart.render（）；
}

UPD.没有

窗口的示例。onload

（不要忘记在实际代码之前导入

canvasjs

）：

var chart=new CanvasJS.chart（“chartContainer”{
数据：[
{
键入：“列”，
数据点：[
{x:10，y:10}，
{x:20，y:15}，
{x:30，y:25}，
{x:40，y:30}，
{x:50，y:28}
]
}
]
});
chart.render（）

在
标记之前将脚本移动到
中。是的，你是正确的，我意识到了这一点，现在我实现了它，但它现在不呈现它给我“CanvasJS.Chart未定义”@MuhammadFazeel您的js代码在导入之前运行。您如何运行您的html文件>>在这里检查它是否正常运行我认为您在运行您的html文件时遇到问题…您必须在服务器或本地主机服务器上运行它这将解决您的问题。为什么window.onload无法从我处运行，尝试运行警报（“测试”）在该窗口内。onload但当我再次加载页面时，没有人发出警报。。但是当我删除onload时，它会给我“ReferenceError:CanvasJS未定义”@Poorprogrammer您可以尝试一些替代方法