将 firebase 数据绘制到 ChartJS

Question

我在从 firebase 数据中绘制 chartjs 中的数据时遇到问题。 ChartJS 只显示列表中的最后一个数据。我能够获取对象数据，但是 chartJS 仅在图表上绘制最后和最新的数据。

链接：

firebase database node chartjs only shows the last data

function gotData(data){
    //console.log(data.val());

    var records = data.val();
    var keys = Object.keys(records);

    console.log(keys);
    for (var i = 0; i < keys.length; i++){
        var k = keys[i];
        var sys = records[k].systolicpressure;
        var dia = records[k].diastolicpressure;
        var time = records[k].time;
        console.log(sys, dia, time);


        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [time],
                datasets: [{
                    label: 'Blood Pressure Graph',
                    data: [sys]
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                    }],
                    xAxes: [{
                        time: {
                            unit:'hour'
                        }
                    }]
                }
            }
        });
    }
}

Answer 1

而不是在每次循环迭代时定义对象数据：

data: {
  labels: [time],
  datasets: [{
    label: 'Blood Pressure Graph',
    data: [sys]
  }]
}

尝试使用 for 循环构建数据数组，并在循环结束时创建图表：

function gotData(data){
//console.log(data.val());

var records = data.val();
var keys = Object.keys(records);
var chartData = [];
console.log(keys);
for (var i = 0; i < keys.length; i++){
    var k = keys[i];
    var sys = records[k].systolicpressure;
    var dia = records[k].diastolicpressure;
    var time = records[k].time;
    chartData.push(sys);
    console.log(sys, dia, time);
}

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [time],
    datasets: [{
      label: 'Blood Pressure Graph',
      data: chartData
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }],
      xAxes: [{
        time: {
          unit:'hour'
        }
      }]
    }
  }
});
}

希望我没有把括号弄乱 :) 让我知道这是如何工作的。

Answer 2

我能够通过在循环外放置一个数组变量并将数据推入其中并将数组变量放置在chartJS数据中来解决这个问题。

var form = document.getElementById('uidgetforchart');
var uid = form.elements.uidgetthis.value;
var ctx = document.getElementById("myChart");
console.log(uid);

var hourOfDay;
hourOfDay = getjustHoursOfDay();

function newDate() {
  return moment().add(days, 'd');
}

var ref = database.ref('Blood Pressure Posts/Registered User/'+uid);
ref.on('value', gotData, errData);

function gotData(data){
    //console.log(data.val());

    var records = data.val();
    var keys = Object.keys(records);
    var systolicdata = [];
    var systolictime = [];
   console.log(keys);
    for (var i = 0; i < keys.length; i++){
        var k = keys[i];
        console.log(k);
        var sys = records[k].systolicpressure;
        console.log(sys);
        var dia = records[k].diastolicpressure;
        var time = records[k].time;
        var chartDataSys = [];
        var chartDataSysTime = [];
        chartDataSys.push(sys);
        systolicdata.push(sys);
        systolictime.push(time);
        chartDataSysTime.push(time);
        //chartDataTime.push(time);
       // console.log(chartDataSys, chartDataSysTime);
        // var datachart = {
        //     labels: 'Blood Pressure Chart',
        //     borderColor:'red',
        //     data: [
        //         {
        //           label: "My First dataset",
        //           data: [1, 3, 4, 2, 1, 4, 2],
        //         }
        //     ]
        // };

    }

console.log(systolicdata);

    var myChart = new Chart(ctx, {
        type: 'line',
        data:
        {
          labels: systolictime,
          datasets: [{
            label: "My First dataset",
            data: systolicdata,
          }]
        },
        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero:true
              }
            }],
            xAxes:[{
              type: 'time',
              time: {
                format: "HH:mm",
                unit: 'hour',
                unitStepSize: 1,
                displayFormats: {
                  'minute': 'HH:mm', 
                  'hour': 'HH:mm', 
                  min: '00:00',
                  max: '23:59'
                },
            }}]

          }
        }
      });
}





function errData(data){
    console.log("Error");
    console.log(err);
}



function getjustHoursOfDay() {

    var hours=[];

    for (var i = 0; i < 23; i++) {

    var _time;
    if (i<10) {
        _time="0"+i+":00";
    }else {
        _time=i+":00";
    }

        hours.push(_time);
    }

    var lastOfDay="23:59";

    hours.push(lastOfDay);
    return hours;
}