Chart.js TypeError：context为null

问题描述 投票：1回答：2

我正在尝试使用HTML画布设置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>元素，但图表没有。

javascript html chart.js
2个回答
1
投票

管理来解决这个问题，来自Madhawa Priyashantha关于如何在HTML画布之前加载图表的评论。我已经在window.onload = function(){...}中封装了之前的JS代码，以确保首先加载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"
            }]
        }
    }
    }); 
}
0
投票

检查此解决方案，

<!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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.