尝试使用 Chart.js 时是否需要发出 http 请求？答案

【问题标题】：Are you required to make an http request when trying to use Chart.js?尝试使用 Chart.js 时是否需要发出 http 请求？
【发布时间】：2021-04-06 10:35:15
【问题描述】：

我观看了一个教程视频，该视频展示了如何使用 Django 设置 Chart.js，使用 Jquery 和 API 函数调用我网站上的一个页面。但是，我不需要进行这些函数调用来获取数据，因为数据与我的对象本身相关联。当我摆脱 http 函数调用而只编写代码时，我的图表不会显示出来。需要http格式吗？我拥有的工作版本是：

            <script> 
            var endpoint = ''/api/chart/data/'';

            fetch(endpoint, {
                method: "GET",
            }).then(response => response.json())
            .then(
                data => {
                console.log('Success:', data);
                graph_data = {...}
                var ctx{{ forloop.counter }} = document.getElementById("myChart{{ forloop.counter }}");

                var myChart =  new Chart(ctx{{ forloop.counter }}, graph_data); 
                })
                .catch((error) => {
                    console.log("Error:")
                    console.log(error);
                });

                        
        </script>
        <div style="width: 60%; float:left;">
            <canvas id= "myChart{{ forloop.counter }}" style = "padding-bottom: 9px;"></canvas>
        </div>

难道这只是：

                console.log('Success:', data);
                graph_data = {...}
                var ctx{{ forloop.counter }} = document.getElementById("myChart{{ forloop.counter }}");

                var myChart =  new Chart(ctx{{ forloop.counter }}, graph_data);

    <div style="width: 60%; float:left;">
        <canvas id= "myChart{{ forloop.counter }}" style = "padding-bottom: 9px;"></canvas>
    </div>

我得到的错误是

Chart.min.js:14 Uncaught TypeError: Cannot read property 'length' of null
    at Object.acquireContext (Chart.min.js:14)
    at new t.Controller (Chart.min.js:11)
    at new t (Chart.min.js:12)
    at (index):616

【问题讨论】：

http 调用不是使用库或创建图表所必需的。您可以从对象加载数据，但您的数据是否在图表初始化之前加载？
@ZombieChowder 我编辑了帖子以显示我设置 graph_data 的位置。据我了解，变量是在加载图表之前设置的。对吗？
是的，就是这样。将您的 graph_data = {...} 指向您的数据，它应该可以在没有 http 请求的情况下工作（如果您确实拥有数据而无需拨打电话）。
@ZombieChowder 将其指向您的数据是什么意思？现在数据就是...所在的位置。
你说你的数据不是从http请求加载的。这意味着存储在另一个变量中，将graph_data 指向该变量。

标签： javascript django chart.js

【解决方案1】：

HTTP 调用与 Chart.js 无关。

它不工作的原因是你在你正在寻找的 DOM 元素被加载之前调用了“getElementById”。

当您使用 fetch 调用时它起作用的原因是，当您发出 HTTP 请求时，您正在给 DOM 时间来加载您的画布。

通常最好在运行任何 javascript 之前等待整个 DOM 加载完毕。

解决方案

将脚本标签移动到页面底部要么将“defer”添加到您的脚本标记中，这将告诉浏览器在解析 DOMContent 后开始运行 javascript。

【讨论】：

在画布标签工作后移动脚本。谢谢！