可以在 web2py 中使用 Chart.js 吗？

Question

我正在为 web2py 中的应用程序苦苦挣扎。我需要包含一个图表元素（雷达图），并尝试了很多选项，但都没有成功。然后我决定通过在视图中添加脚本来使用 Chart.bundle.js 并将文件 Chart.bundle.js 存储在静态目录中。

但它不起作用。我收到 none 错误，但图表未加载到视图中。以下是查看代码：

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

谢谢。

Answer 1

您试图以错误的方式创建它，您不能只指定图表 ID 并使用它。您需要的是 ctx，canvas 元素的上下文。查看如何使用它：

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

或

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

创建图表时使用它而不是 id。（那么你可以只使用 chart.js，而不是捆绑包）

Answer 2

<script src='static/Chart.bundle.js'></script>

检查浏览器开发人员工具的网络选项卡，查看 Chart.bundle.js 是否正在加载。您可能会收到 404 响应，因为上面的 URL 是相对 URL 并将附加到父页面的 URL。您应该改用 web2py URL 帮助器来生成所有内部 URLs:

<script src="{{=URL('static', 'Chart.bundle.js')}}"></script>

上面应该会生成一个 URL，例如 /appname/static/Chart.bundle.js（如果您将路由配置为默认到此应用程序，appname 将被排除）。

可以在 web2py 中使用 Chart.js 吗？

Is it possible to use Chart.js in web2py?

chart.js

web2py