Question

我正在编写代码以从Firebase数据库中读取值，将其存储到数组中，然后将数组插入Chart.js代码中以在图形中显示数据。但是我的图表显示为空。

首先，我创建数据库中值的快照，并将其推到新数组genderData中。然后，我确认该数组已填充console.log(genderData)（请参见下文）。据我所知，该数组已填充：

我的控制台日志：

然后我在对数据库的引用调用之外登录控制台，它看起来像这样：

我从数据库中提取数据的代码：

var rootRef = firebase.database().ref().child('counters');

// Get counter values.
var genderData = [];

rootRef.once('value').then(function(snapshot){
    genderData.push(snapshot.val()['Male']);
    genderData.push(snapshot.val()['Female']);
    genderData.push(snapshot.val()['Nonbinary']);
    genderData.push(snapshot.val()['Other']);
    genderData.push(snapshot.val()["Didn't Say"]);
    console.log(genderData);
})
console.log(genderData);

然后，我使用Chart.js创建了一个常规的条形图，并尝试将genderData插入到该图中：

// Bar graph displaying the total number of students by gender.
var ctx = document.getElementById("myChart4").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Male", "Female", "Non-Binary", "Other", "Unspecified"],
        datasets: [{
            data: genderData,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)',
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        title: {
            display: true,
            text: 'Total Students by Time Taken to Complete Degree'
        },
        legend:{
            display: false
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

但是我的图表是空的：

编辑：

进一步检查后，我发现这些值正在显示...一种。

看来我的数据不是在创建图表的“条形图”吗？而且我的y值从0.0开始到1.0结束，我也不知道为什么。

Firebase和Chart.js-从数据库提取到数组中的数据未显示在图形中

0 个答案: