javascript - 使用 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

您正在使用确实 undefined variable ctx。

改变这一行:

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

对此:

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