Firebase数据未在HighCharts中绘制

Question

I would like to use Highcharts to plot a graph using my Firebase data. The axes of the graph showed up but I failed to plot the graph.

This is the data printed on my HTML console.

Javascript code that I'm using:

var config = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: ""
};

firebase.initializeApp(config);
var dbRef0 = firebase.database().ref().child("");
var dbRef1 = firebase.database().ref().child("Meter2");
var dataSetFirebaseTotalActivePower1 = [];

dbRef1.limitToLast(20).on('child_added',function(snap) {
    var TotalActivePower1 = snap.val().totalActivePower;
    var Time1 = snap.val().time;
    dataSetFirebaseTotalActivePower1.push({x: Time1 ,y: TotalActivePower1});
    console.log(dataSetFirebaseTotalActivePower1);
});

Highcharts.chart('container', {
    chart: {
        type: 'areaspline'
    },
    title: {
        text: 'Total Active Power Graph'
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        verticalAlign: 'top',
        x: 150,
        y: 100,
        floating: true,
        borderWidth: 1,
        backgroundColor: (Highcharts.theme && 
            Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
    },
    xAxis: {
        type: 'datetime',
        title: {
            text: 'Time'
        },
        plotBands: [{ 
            from: 4.5,
            to: 6.5,
            color: 'rgba(68, 170, 213, .2)'
        }]
    },
    yAxis: {
        title: {
            text: 'Total Active Power, kWh'
        }
    },
    tooltip: {
        shared: true,
        valueSuffix: ' units'
    },
    credits: {
        enabled: false
    },
    plotOptions: {
        areaspline: {
            fillOpacity: 0.5
        }
    },
    series: [{
        data: [dataSetFirebaseTotalActivePower1]
    }]
});

The chart appears, but empty.

Answer 1

Your chart configuration looks good to me, what you're experiencing is that the data from firebase comes in asynchronously, which means that at the time the chart is created, your array is empty, and only then the nodes start pouring in, one by one.

Instead of populating the results array you could add the data directly to the charts, via addPoint API call:

Add a point to the series after render time. The point can be added at the end, or by giving it an X value, to the start or in the middle of the series.

Try this update to your child_added event callback:

dbRef1.limitToLast(20).on('child_added', function(snap) {
    var TotalActivePower1 = snap.val().totalActivePower;
    var Time1 = snap.val().time;
    var DataPoint = { x: Time1, y: TotalActivePower1 };
    chart.series[0].addPoint(DataPoint, true);
});

It may be useful for you to understand Why are the Firebase API asynchronous?