Question

我用Chart.js制作了几张图片。但极地图形和雷达不起作用。我收到以下错误：＆＃34;未捕获的TypeError：无法读取属性＆＃39; length＆＃39; of null＆＃34;

我使用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,
       ...
      }
    }

对我有用。希望对别人有帮助。

错误：＆＃34;未捕获的TypeError：无法读取属性＆＃39; length＆＃39; of null＆＃34; chart.js之

3 个答案: