将数组传递给 Chart.js 无效，图表未呈现

Question

我试图通过将数据数组传递给 Chart.js 来显示图表。如果我传递数组，图表根本不会呈现；就好像数组都是空的。如果我将值硬编码到数组所在的位置，则图表可以正常呈现。我是 JavaScript/TypeScript 的新手... 我发现了这些类似的问题，但它们在我的情况下似乎不起作用：

Array not working correctly in Chartjs

How to add datas to chart js from javascript array itself?

这是我的代码。如果我删除硬编码数组并取消注释数组变量，则图表不会呈现。

  buildChart() {
var momentArr = new Array(); var weightArr = new Array(); var bmiArr = new Array();
this.weightList.forEach(elements => {
  elements.forEach(element => {
    momentArr.push(element.moment);
    weightArr.push(element.weight);
    bmiArr.push(element.bmi);
  });
})

console.log(momentArr);
console.log(weightArr);
console.log(bmiArr);

this.weightChart = new Chart(this.weightCanvas.nativeElement, {
  type: 'line',
  data: {
    labels: [1500948156623,1500948161541], //momentArr,
    datasets: [
      {
        label: 'Weight',
        borderColor: "#3cba9f",
        fill: false,
        data: [300, 280] //weightArr
      },
      {
        label: 'BMI',
        borderColor: "#8e5ea2",
        fill: false,
        data: [150, 140] //bmiArr
      }
    ]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          displayFormats: {
            quarter: 'MMM YYYY'
          }
        }
      }],
      yAxes: [{
        type: 'linear',
        ticks: { beginAtZero: false}
      }]
    }
  }

});
}

仅供参考，weightList 是一个 FirebaseListObservable。

Answer 1

你会想要

this.weightChart.data.datasets[0].data.concat(weightArr);

this.weightChart.update();

其他数据集依此类推。如果 concat 不起作用，您需要循环遍历 weightArr 并推送到图表，然后更新。

for (var i = 0 ; i < weightArr.length; i++){
            this.weightChart.data.datasets[0].data.push(weightArr[i]);
}

this.weightChart.update();

希望对您有所帮助！

Answer 2

原来问题根本不是 chart.js；这是从 Firebase 检索数据的异步性质。我添加了一个 ref.on(....) 并按照@john townsend 的回答中提到的那样填充数组，现在它正在正确呈现。感谢您的帮助！

将数组传递给 Chart.js 无效，图表未呈现

Passing Array to Chart.js not working, chart not rendering

javascript

charts

typescript

chart.js

chart.js2