在尝试使用Chart.js时，是否需要发出http请求

Question

我观看了一个教程视频，该视频展示了如何使用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

Answer 1

HTTP调用不属于任何与Chart.js.相关的内容

它不起作用的原因是你打电话给"；getElementById"；在加载您要查找的DOM元素之前。

当您使用fetch调用时，它之所以有效，是因为当您发出HTTP请求时，您给了DOM加载画布的时间。

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

解决方案

将脚本标记移动到页面底部或添加"；推迟"；到您的脚本标记，该标记将告诉浏览器在解析DOMContext后开始运行javascript。