是否可以在web2py中使用Chart.js?

问题描述 投票:0回答:2

我正在努力使用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>

谢谢。

chart.js web2py
2个回答
1
投票
<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)。


0
投票

您试图以错误的方式创建它,您不能只指定图表ID并使用它。你需要的是ctx,你的画布元素的上下文。了解如何使用它:

$("#chartjs-radar").get(0).getContext('2d');

要么

document.getElementById('chartjs-radar').getContext('2d');

创建图表时使用此代替id。 (那你可以只使用chart.js,而不是捆绑)

© www.soinside.com 2019 - 2024. All rights reserved.