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

【问题标题】：error : "Uncaught TypeError: Cannot read property 'length' of null" Chart.js错误：“未捕获的类型错误：无法读取 null 的属性‘长度’”Chart.js
【发布时间】：2016-09-22 09:25:20
【问题描述】：

我用 Chart.js 制作了几张有效的图表。但是极坐标图和雷达不起作用。我收到以下错误：“未捕获的 TypeError：无法读取 null 的属性 'length'”

我使用 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'
            }]
        }
    }
});

【问题讨论】：

在您的代码尝试了相同版本的 Chart.js 之后，它工作正常。没有错误。你确定这是一个 Chart.js 问题吗？ jsfiddle.net/vwh2zsn9
我的代码很好然后问题出在其他地方我用我的代码做了一个jsbin：jsbin.com/wehalay/1/edit?html,js,output

标签： javascript chart.js adminlte

【解决方案1】：

问题出在这一行：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：