Question

<html>
<head>
</head>
<body>
<h2>Example of Line Graph</h2>    
<script src="../../../Scripts/Chart.min.js"></script>
<script src="../../../Scripts/Chart.js"></script>
<script>
    var monthsData = {
        labels: ["January", "February", "March", "April", "May", "June"],
        datasets: [
        {
            fillColor: "rgba(172,194,132,0.4)",
            strokeColor: "#ACC26D",
            pointColor: "#fff",
            pointStrokeColor: "#9DB86D",
            data: [203, 156, 99, 251, 305, 247]
        }
        ]
    };
    var months = document.getElementById("chartData").getContext("2d");
    new Chart(months).Line(monthsData);
</script>
<div>
     <canvas id="chartData" width="600" height="400"></canvas>
</div>
</body>
</html>

我之前看到过有关同一问题的错误并纠正了所有这些错误，但我的问题尚未解决。我正在使用chart.js库。

Answer 1

将script标记放在包含div元素的canvas下方。

您收到错误，因为在解释和执行脚本时，DOM中不存在画布。

MDN page about script tags表示：

在浏览器继续解析页面之前，会立即获取并执行没有异步或延迟属性的脚本以及内联脚本。

这就是说，我的答案提出了错误的原因和简单的解决方法。查看Satpal's answer以获得更加惯用的解决方案。

Answer 2

当执行语句document.getElementById("chartData")时尚未加载DOM时，您遇到了问题。所以它无法找到元素。

您应该使用DOMContentLoaded事件

当初始HTML文档已完全加载并解析时，会触发DOMContentLoaded事件，而无需等待样式表，图像和子帧完成加载。

<script>
document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");

    var monthsData = {
        labels: ["January", "February", "March", "April", "May", "June"],
        datasets: [
                {
                    fillColor: "rgba(172,194,132,0.4)",
                    strokeColor: "#ACC26D",
                    pointColor: "#fff",
                    pointStrokeColor: "#9DB86D",
                    data: [203, 156, 99, 251, 305, 247]
                }
            ]
    };
    var months = document.getElementById("chartData").getContext("2d");
    new Chart(months).Line(monthsData);
});
</script>

Answer 3

像这样更改您的代码

<html>
<head>
</head>
<body>
<h2>Example of Line Graph</h2>    
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>

<div>
     <canvas id="chartData" width="600" height="400"></canvas>
</div>
<script>
    var monthsData = {
        labels: ["January", "February", "March", "April", "May", "June"],
        datasets: [
        {
            fillColor: "rgba(172,194,132,0.4)",
            strokeColor: "#ACC26D",
            pointColor: "#fff",
            pointStrokeColor: "#9DB86D",
            data: [203, 156, 99, 251, 305, 247]
        }
        ]
    };
    var months = document.getElementById("chartData").getContext("2d");
    new Chart(months).Line(monthsData);
</script>

</body>
</html>

Answer 4

您正在尝试在加载元素之前检索该元素。因此，请在页面加载后使用 window.onload 事件处理程序加载脚本。

加载事件在文档加载过程结束时触发。此时，文档中的所有对象都在DOM中，并且所有图像，脚本，链接和子帧都已完成加载。（ Taken from here ）

<script>
  window.onload = function() {    
    var monthsData = {
      labels: ["January", "February", "March", "April", "May", "June"],
      datasets: [{
        fillColor: "rgba(172,194,132,0.4)",
        strokeColor: "#ACC26D",
        pointColor: "#fff",
        pointStrokeColor: "#9DB86D",
        data: [203, 156, 99, 251, 305, 247]
      }]
    };
    var months = document.getElementById("chartData").getContext("2d");
    new Chart(months).Line(monthsData);
  }
</script>

类型错误：document.getElementById（...）为null

4 个答案: