Firebase数据未在HighCharts中绘制

Question

我想使用Highcharts使用我的Firebase数据绘制图形。 图的轴出现了，但我无法绘制图。

这是在我的HTML控制台上打印的数据。

我正在使用的Javascript代码：

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]
    }]
});

图表出现，但为空。

Answer 1

您的图表配置对我来说看起来不错，您正在体验的是Firebase中的数据是异步输入的，这意味着在创建图表时，您的数组为空，然后节点才开始涌入一。

您可以通过addPoint API调用将数据直接添加到图表中，而不是填充结果数组：

渲染时间过后，向系列添加一个点。 该点可以添加到序列的开头或中间，也可以在结尾处添加一个X值。

尝试对您的child_added事件回调进行此更新：

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

您可能会了解Firebase API为何是异步的？