我正在尝试使用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>元素，但图表不会加载。
答案 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>