Question

Chart.js TypeError：上下文为空

2019-02-23

1828

javascript html chart.js

我正在尝试使用 HTML 画布设置 Chart.js，我按照在线找到的一些示例进行了操作，这些示例可行，但现在我尝试自己创建 Chart.js，但出现了错误消息。

具体错误消息为：

TypeError: t is null[Learn More]
acquireContext https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js:10
construct https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js:10
t https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js:10
<anonymous> file:///C:/Users/ahbuc/Documents/graph/script.js:8

我正在使用的浏览器是 Firefox Quantum 65.0.1，我使用的是 Chart.min.js 2.7.3

使用的 HTML 为：

<!DOCTYPE html>
<html>
  <head>
    <title>Plant Data</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="wrapper">
      <h1>Environmental Data</h1>
      <h2>Number of people (in millions) living on earth, the last 500 years</h2>
      <canvas id="myChart" width="1600" height="900"></canvas>
    </div>
  </body>
</html>

用于生成图表的 JavaScript 为：

var temp = [19,19,19,20,21,21,22,20,19,16,15,14];
var humidity = [40,40,40,60,50,40,30,20,10,100,70,60]; 
var moisture = [90,80,70,60,50,40,30,20,10,80,70,80];
var lux = [60,60,60,70,70,70,80,80,70,70,60,50];
var dates = ["January","February","March","April","May","June","July","August","September","October","November","December"];

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
      labels:dates,
      datasets:[
          {
              data:temp,
              label:"Temperature",
              borderColor:"#3e95cd",
              fill:false,
              yAxisID:"Num"
          },
          {
              data:humidity,
              label:"Humidity",
              borderColor:"#8e5ea2",
              fill:false,
              yAxisID:"Per"
          },
          {
              data:moisture,
              label:"Soil Moisture",
              borderColor:"#3cba9f",
              fill:false,
              yAxisID:"Per"
          },
          {
              data:lux,
              label:"Light",
              borderColor:"#e8c3b9",
              fill:false,
              yAxisID:"Per"
          }
      ]
  },
  options: {
      scales: {
          yAxes: [{
            id:"Num",
            type:"linear",
            position:"left"
          },
        {
            id:"Per",
            type:"linear",
            position:"right"
        }]
      }
  }
});

我真的不确定我做错了什么，我之前使用过 Chart.js，并且成功了，所以不确定我做了什么不同的事情。加载网页时， <h1> 和 <h2> 元素加载，但图表未加载。

Answer 1

成功修复了该问题，源自 Madhawa Priyashantha 对图表在 HTML 画布之前加载方式的评论。我已将之前的 JS 代码封装在 window.onload = function(){... 中，以确保 DOM 先加载。

JS 的工作状态，其他内容均未更改：

window.onload = function() {
    var temp = [19,19,19,20,21,21,22,20,19,16,15,14];
    var humidity = [40,40,40,60,50,40,30,20,10,100,70,60]; 
    var moisture = [90,80,70,60,50,40,30,20,10,80,70,80];
    var lux = [60,60,60,70,70,70,80,80,70,70,60,50];
    var dates = ["January","February","March","April","May","June","July","August","September","October","November","December"];

    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels:dates,
        datasets:[
            {
                data:temp,
                label:"Temperature",
                borderColor:"#3e95cd",
                fill:false,
                yAxisID:"Num"
            },
            {
                data:humidity,
                label:"Humidity",
                borderColor:"#8e5ea2",
                fill:false,
                yAxisID:"Per"
            },
            {
                data:moisture,
                label:"Soil Moisture",
                borderColor:"#3cba9f",
                fill:false,
                yAxisID:"Per"
            },
            {
                data:lux,
                label:"Light",
                borderColor:"#e8c3b9",
                fill:false,
                yAxisID:"Per"
            }
        ]
    },
    options: {
        scales: {
            yAxes: [{
                id:"Num",
                type:"linear",
                position:"left"
            },
            {
                id:"Per",
                type:"linear",
                position:"right"
            }]
        }
    }
    }); 
}

Answer 2

检查这个解决方案，

<!DOCTYPE html>
<html>

<head>
  <title>Plant Data</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="wrapper">
    <h1>Environmental Data</h1>
    <h2>Number of people (in millions) living on earth, the last 500 years</h2>
    <canvas id="myChart" width="1600" height="900"></canvas>
  </div>
  <script type="text/javascript">
    var temp = [19, 19, 19, 20, 21, 21, 22, 20, 19, 16, 15, 14];
    var humidity = [40, 40, 40, 60, 50, 40, 30, 20, 10, 100, 70, 60];
    var moisture = [90, 80, 70, 60, 50, 40, 30, 20, 10, 80, 70, 80];
    var lux = [60, 60, 60, 70, 70, 70, 80, 80, 70, 70, 60, 50];
    var dates = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: dates,
        datasets: [{
            data: temp,
            label: "Temperature",
            borderColor: "#3e95cd",
            fill: false,
            yAxisID: "Num"
          },
          {
            data: humidity,
            label: "Humidity",
            borderColor: "#8e5ea2",
            fill: false,
            yAxisID: "Per"
          },
          {
            data: moisture,
            label: "Soil Moisture",
            borderColor: "#3cba9f",
            fill: false,
            yAxisID: "Per"
          },
          {
            data: lux,
            label: "Light",
            borderColor: "#e8c3b9",
            fill: false,
            yAxisID: "Per"
          }
        ]
      },
      options: {
        scales: {
          yAxes: [{
              id: "Num",
              type: "linear",
              position: "left"
            },
            {
              id: "Per",
              type: "linear",
              position: "right"
            }
          ]
        }
      }
    });
  </script>
</body>

</html>