我想使用高级图表来绘制一个使用我的Firebase数据的图表。图的轴出现了,但我没有画出图。
我正在使用的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]
}]
});
图表出现了,但是是空的。
发布于 2018-05-17 09:17:38
您的图表配置在我看来不错,您正在体验的是,来自火基的数据是异步输入的,这意味着在创建图表时,您的数组是空的,然后节点开始一个接一个地涌入。
您可以通过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是异步的?可能是有用的
https://stackoverflow.com/questions/50390608
复制相似问题