我正在努力使用web2py中的应用程序。我需要包含一个图表元素(雷达图表),并尝试了许多选项,但没有成功。然后我决定使用Chart.bundle.js在视图中添加脚本并将文件Chart.bundle.js存储在静态目录中。
但它没有用。我没有收到任何错误,但图表未在视图中加载。以下是查看代码:
{{extend 'layout.html'}}
<html>
<head>
<script src='static/Chart.bundle.js'></script>
</head>
<body>
<br>
<div id="wrapper">
<canvas id="chartjs-radar" width="600" height="400"></canvas>
</div>
<script type="text/javascript">
var presets = window.chartColors;
var utils = Samples.utils;
var data = {
labels: {{=areaslist}},
datasets: [{
backgroundColor: utils.transparentize(presets.red),
borderColor: presets.red,
data: {{=calcperarea}},
label: 'Digital Maturity Assessment'
}]
};
var options = {
maintainAspectRatio: true,
spanGaps: false,
elements: {
line: {
tension: 0.000001
}
}
};
var chart = new Chart('chartjs-radar', {
type: 'radar',
data: data,
options: options
});
</script>
</body>
</html>
谢谢。
<script src='static/Chart.bundle.js'></script>
检查浏览器开发人员工具的网络选项卡,以查看Chart.bundle.js是否正在加载。您可能会得到404响应,因为上面的URL是相对URL,并且会附加到父页面的URL。您应该使用web2py URL
帮助程序生成所有内部URL:
<script src="{{=URL('static', 'Chart.bundle.js')}}"></script>
上面应该生成一个像/appname/static/Chart.bundle.js
的URL(如果您将路由配置为默认为此应用程序,则将排除appname
)。
您试图以错误的方式创建它,您不能只指定图表ID并使用它。你需要的是ctx
,你的画布元素的上下文。了解如何使用它:
$("#chartjs-radar").get(0).getContext('2d');
要么
document.getElementById('chartjs-radar').getContext('2d');
创建图表时使用此代替id。 (那你可以只使用chart.js,而不是捆绑)