使用ChartJS时，多个数据集不起作用

Question

我正在使用图表js生成折线图，我想显示显示多个显示不同数据的数据集。在网上查看后，我在下面找到了解决方案，但由于某种原因它不起作用。在控制台中，我收到以下错误：Uncaught ReferenceError: ctx is not defined at 1:80.

如果有人能看到为什么图表不起作用，那就太好了。

.JS：

document.getElementById('productDetailGraph').getContext('2d');
var productGraph = new Chart(ctx, {
type: 'line',
data: {
labels: ['01, 10', '02, 10', '03, 10', '04, 10', '05, 10', '06, 10', '07, 10', '08, 10', '09, 10', '10, 10', ],
datasets: [{
data: ['123, 124, 125, 126, 128, 122, 127, 121, 125, 127'],
label: 'Argos',
backgroundColor: 'rgb(255, 255, 255)',
fill: false,
borderColor: 'rgb(128, 128, 128)',
}, {
data: ['121, 122, 124, 122, 129, 131, 134, 137, 138, 140'],
label: 'Smyths',
backgroundColor: 'rgb(255, 255, 255)',
fill: false,
borderColor: 'rgb(128, 128, 128)',
}, {
data: ['122, 129, 125, 134, 135, 138, 139, 142, 145, 154'],
label: 'Entertainer',
backgroundColor: 'rgb(255, 255, 255)',
fill: false,
borderColor: 'rgb(128, 128, 128)',
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero:false
}
}]
}
}
});

Answer 1

您正在使用确实未定义的变量ctx。

更改此行：

document.getElementById('productDetailGraph').getContext('2d');

对此：

var ctx = document.getElementById('productDetailGraph').getContext('2d');