Chart.js TypeError：上下文为空

时间：2019-02-23 11:39:48

标签： javascript html chart.js

我正在尝试使用HTML画布设置Chart.js，我在网上找到了一些可以奏效的示例，但现在我试图自己创建一个错误消息。< / p>

具体错误消息是：

Sub test()
    Dim wb As Workbook
    Dim ws As Worksheet
    Dim LastRow As Long, LastCol As Long, a As Double, i As Long
    Dim Rng As Range
    Dim Cell As Variant, Estimate As Variant

    Set wb = ThisWorkbook
    Set ws = wb.Sheets(1)

    LastRow = ws.Cells(ws.Rows.Count, "I").End(xlUp).Row
    LastCol = ws.Cells(1, ws.Columns.Count).End(xlToLeft).Column

    Set Rng = ws.Range(ws.Cells(2, 9), ws.Cells(LastRow, 9))


    For Each Cell In Rng
        i = 0
        a = 0
        For Each Estimate In Rng
            If Estimate.Value = Cell.Value Then
                i = i + 1   'Count nr of intances
                a = a + ws.Cells(Estimate.Row, 3).Value 'sum booking value
                If i > 1 Then
                    ws.Rows(Estimate.Row).Delete
                    i = 1
                    LastRow = LastRow - 1
                End If
            End If
        Next Estimate
        ws.Cells(Cell.Row, 3).Value = a 'Enter sum in booked this week
    Next Cell

End Sub

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

使用的HTML是：

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

用于生成图表的JavaScript是：

<!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>

我真的不确定自己做错了什么，在成功使用之前，我已经使用过Chart.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" }] } } }); 和<h1>元素，但图表不会加载。

2 个答案:

答案 0 :(得分：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"
            }]
        }
    }
    }); 
}

答案 1 :(得分：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>

相关问题
最新问题