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网站获取）进行比较后，问题变得明显。

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

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

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

根据您的代码检查this工作示例。

希望它有所帮助。

Answer 2

您的主数据中似乎需要X轴标签：

    data: {
       labels : ["January", "February", "March", "April", "May", "June", "July"],
       datasets: [

DEMO

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

2 个答案: