Данные 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 является асинхронным?