javascript - 使用 2 个数据集时 chartjs 未定义长度

Question

我正在使用 chartjs 来显示一些虚拟数据作为测试。我不断收到此错误。它在实际的 Chart.js 文件中引起..

无法读取未定义的属性“长度”

这是我的代码:

<canvas id="ctx" width="400" height="400"></canvas>

<script>
    var ctx = document.getElementById('ctx');
    var chart = new Chart(ctx, {
        labels: ["1", "2"],
        type: 'line',
        data: {
            datasets: [
                {
                    label: "Test1",
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: "green",
                    borderColor: "black",
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: "black",
                    pointBackgroundColor: "green",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "blue",
                    pointHoverBorderColor: "black",
                    pointHoverBorderWidth: 2,
                    pointRadius: 1,
                    pointHitRadius: 10,
                    data: [1,2,50,42,43,23,1],
                    spanGaps: false
                },
                {
                    label: "Test2",
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: "blue",
                    borderColor: "black",
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: "black",
                    pointBackgroundColor: "blue",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "green",
                    pointHoverBorderColor: "black",
                    pointHoverBorderWidth: 2,
                    pointRadius: 1,
                    pointHitRadius: 10,
                    data: [4,55,23,52,32,13,4],
                    spanGaps: false
                }
            ]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });
</script>

但是，我实际上无法让它工作...

我觉得还不错有什么建议吗？

Answer 1

在检查您的代码并与有效代码(取自 this 站点)进行比较后，问题变得很明显。

首先:您的标签属性在长度上与数据不匹配。这可能解释了你提到的长度问题。

其次，您必须将标签属性移动到数据对象中。

data: {
    labels: ["1", "2", "3", "4", "5", "6", "7"],
    ...

检查 this基于您的代码的工作示例。

希望对您有所帮助。