问题描述
我的图表未呈现。当我加载页面时,它仅显示白色背景。我不知道该如何调试。有人可以帮忙吗?
<!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>