javascript - 错误：“未捕获的类型错误：无法读取 null 的属性‘长度’”Chart.js

Question

我用 Chart.js 制作了几个有效的图形。但是极坐标图和雷达不起作用。我收到以下错误：“未捕获的类型错误：无法读取 null 的属性‘长度’”

我使用 charjs 2.3.0

我不明白错误可能来自哪里。

<div class="col-lg-6 col-md-6">
     <canvas class="box box-warning" id="myChart4" width="400" height="400"></canvas>
</div>

<div class="col-lg-6 col-md-6">
     <canvas class="box box-warning" id="myChart5" width="400" height="400"></canvas>
</div>

//////////////////////////////////////////////
// Chart Polar
//////////////////////////////////////////////

var ctx = document.getElementById("myChart4");

new Chart(ctx, {
    type: 'polarArea',
    data: {
        labels: [
            "Red",
            "Blue",
            "Yellow"
        ],
        datasets: [{
            data: [300, 50, 100],
            backgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ],
            hoverBackgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ]
        }]
    },
    options: {
        cutoutPercentage: 50,
        animation: {
            animateScale: false
        }
    }
});

//////////////////////////////////////////////
// Radar
//////////////////////////////////////////////

var ctx = document.getElementById("myChart5");


var scatterChart = new Chart(ctx, {
    type: 'radar',
    data: data = {

        labels: ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche", ],
        datasets: [{
            label: 'the first dataset',
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255,99,132,1)',
            data: [10, 34, 50, 34, 56, 65, 43]
        }, {
            label: 'the second dataset',

            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',

            data: [54, 72, 100, 36, 76, 23, 21]
        }]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'linear',
                position: 'bottom'
            }]
        }
    }
});

Answer 1

问题是这一行：

var ctx = document.getElementById('sexe');

页面上没有任何 id 为“sexe”的元素

Answer 2

该错误是由于 Chart.js 尝试在其上附加图表时 HTML 中不存在该元素。

Answer 3

如果您使用的是 Angular 2+，请尝试在其中构建选项和数据图表。我需要这样做，因为我使用了 @Input() 属性来获取图表中显示的数据：

    ngOnChanges(changes: SimpleChanges){
      this.options = {
       responsive: true,
       maintainAspectRatio: false,
       ...
      }
    } 

这对我有用。希望它可以帮助某人。