如何从实时数据库Firebase获取数据并将其放入Chart.js？

Question

我正在尝试使用实时数据库Firebase中的数据创建图表。

我创建了一个条形图。下面的代码是我的条形图。我已经在其中对名称和数据进行了硬编码，但这就是它的外观。

    this.BarChart = new Chart('barChart', {
      type: 'bar',
    data: {
     labels: ["Tommy","John"],
     datasets: [{
         label: '# of times reported for bullying',
         data: [2,1],
         backgroundColor: 'rgba(255, 99, 132, 0.2)',
         borderWidth: 1
     }]
    }, 
    options: {
     title:{
         text:"Bar Chart",
         display:true
     },
     scales: {
         yAxes: [{
             ticks: {
                 beginAtZero:true
             }
         }]
     }
    }
    });

我希望每当将新数据保存到数据库中时，图表都会动态更改。因此，如果数据库中有一个新名称，它将为它创建另一个栏，并显示其名称在数据库中的次数。

例如：当前在我的数据库中，Tommy在“ BullyName”的“ Bullying”下保存了两次，而John的名字只出现了一次。因此，该图表应具有2个名称：Tommy和John以及它们各自在数据库中出现的次数。