Javascript Chart.js TypeError:上下文为空

我正在尝试使用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

我真的不确定我做错了什么，我以前成功地使用过Chart.js，所以不确定我做了什么不同。加载网页时，会加载

和

元素，但图表不会加载。

检查此解决方案

植物数据
环境数据
在过去500年中，地球上的人口数量（以百万计）
变量温度=[19,19,19,20,21,21,22,20,19,16,15,14]；
var湿度=[40,40,40,60,50,40,30,20,10100,70,60]；
变量湿度=[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 ctx=document.getElementById（“myChart”）；
var myChart=新图表（ctx{
键入：“行”，
数据：{
标签：日期，
数据集：[{
数据：温度，
标签：“温度”，
边框颜色：“3e95cd”，
填充：假，
yAxisID：“Num”
},
{
数据：湿度，
标签：“湿度”，
边框颜色：“8e5ea2”，
填充：假，
yAxisID：“每”
},
{
数据：湿度，
标签：“土壤湿度”，
边框颜色：“3cba9f”，
填充：假，
yAxisID：“每”
},
{
数据：勒克斯，
标签：“光”，
边框颜色：“#e8c3b9”，
填充：假，
yAxisID：“每”
}
]
},
选项：{
比例：{
雅克斯：[{
id:“Num”，
类型：“线性”，
位置：“左”
},
{
id:“每”，
类型：“线性”，
位置：“右”
}
]
}
}
});

成功解决了这个问题，来自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"
            }]
        }
    }
    }); 
}

---

您应该在加载dom后调用图表代码。因此，请将您的逻辑封装在函数中，并在ready/onload事件中调用该函数。不确定是什么原因导致此问题，但我猜在调用图表函数时画布未加载我已经运行了您的代码，您所说的错误我看不到。你可以在这里检查它是否正常工作。我认为您需要在适当的区域调用javascript代码。这可能会导致一些控制台错误，但这是针对您正在讨论的问题。@rykamol在适当的区域调用我的JS代码是什么意思？我认为在HTML中从

头部调用JS脚本是正常的？在文件末尾（例如：页脚部分）添加脚本标记，而不是在头部部分，现在它可以工作了。这真的很奇怪，我尝试在不同的浏览器中运行它（Edge 42.17134.1.0和Chrome 72.0.3626.119）页面仍然会加载，但不会加载图表。将JS代码放入标记中。html内容，然后是JS代码。它会起作用的。
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"
        }]
      }
  }
});

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"
            }]
        }
    }
    }); 
}