在HighCharts中没有绘制防火墙数据
在HighCharts中没有绘制防火墙数据
提问于 2018-05-17 11:43:08
我想使用高级图表来绘制一个使用我的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]
}]
});图表出现了，但是是空的。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-17 17: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是异步的？可能是有用的
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50390608
复制相关文章
相似问题
腾讯云开发者
