将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;
}