CanvasJs图表未渲染
CanvasJs图表未渲染
提问于 2020-09-24 14:29:34
我的图表没有呈现。当我加载页面时，它只显示白色背景。我不知道怎么调试这个。有人能帮上忙吗？
<!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>回答 2
Stack Overflow用户
发布于 2020-09-24 14:47:08
您需要编写适当的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>更新。没有window.onload的示例(不要忘记在实际代码之前导入canvasjs )：
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();<div id="chartContainer" style="height: 500px; width: 50%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
Stack Overflow用户
发布于 2020-09-24 14:42:53
试试这个希望这能行得通
<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>结果
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64040691
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号