Javascript AnyChart火基
我对任何图表库都是新手。我想使用AnyChart来绘制从Firebase提取的数据。我现在面临的一个问题是在任何图表上绘制数组数据。我现在面临使用以下代码从Firebase中提取阵列数据集的问题:Javascript AnyChart火基,javascript,firebase,firebase-realtime-database,anychart,Javascript,Firebase,Firebase Realtime Database,Anychart,我对任何图表库都是新手。我想使用AnyChart来绘制从Firebase提取的数据。我现在面临的一个问题是在任何图表上绘制数组数据。我现在面临使用以下代码从Firebase中提取阵列数据集的问题: dbRef2.limitToLast(20).on('child_added',function(snap) { var Time2 = snap.val().timestamp; var Humidex2 = snap.val().Humidex; dataSetFirebaseHumidex2
dbRef2.limitToLast(20).on('child_added',function(snap) {
var Time2 = snap.val().timestamp;
var Humidex2 = snap.val().Humidex;
dataSetFirebaseHumidex2.push({x: Time2 ,y: Humidex2});
console.log(dataSetFirebaseHumidex2);
});
anychart.onDocumentReady(function () {
// create a data set
var data = anychart.data.set();
data.data([dataSetFirebaseHumidex2]);
// map the data
var seriesData_1 = data.mapAs({x: 0, y: 1});
// create a chart
var chart = anychart.area();
// create the first series, set the data and name
var series1 = chart.spline(data);
series1.name("S1");
// configure the visual settings of the first series
series1.normal().stroke("#00cc99", 1, "10 5", "round");
series1.hovered().stroke("#00cc99", 2, "10 5", "round");
series1.selected().stroke("#00cc99", 4, "10 5", "round");
// set the chart title
chart.title("Humidex Index");
// set the titles of the axes
chart.xAxis().title("Time");
chart.yAxis().title("Humidex");
// set the container id
chart.container("container");
// initiate drawing the chart
chart.draw();
});
谁能给点建议吗?非常感谢您的帮助。此代码应修改如下:
anychart.onDocumentReady(function () {
// create a data set
var data = anychart.data.set(dataSetFirebaseHumidex2);
// map the data
var seriesData_1 = data.mapAs({x: 'x', value: 'y'});
// create a chart
var chart = anychart.area();
// create the first series, set the data and name
//var series1 = chart.splineArea(data);
var series1 = chart.spline(data);
series1.name("Meter 1");
// configure the visual settings of the first series
series1.normal().stroke("#00cc99", 1, "10 5", "round");
series1.hovered().stroke("#00cc99", 2, "10 5", "round");
series1.selected().stroke("#00cc99", 4, "10 5", "round");
// set the chart title
chart.title("Total Active Power Consumption (ShellKK)");
// set the titles of the axes
chart.xAxis().title("Time");
chart.yAxis().title("Total Active Power, kWh");
//enable dateTime xScale
chart.xScale(anychart.scales.dateTime());
// set the container id
chart.container("container").draw();
});
但是,请确保在执行此代码之前,dataSetFirebaseHumidex2变量已经包含以下格式的数据(对象数组):
[
{x: 1526446204973, y: 12},
{x: 1526456204973, y: 14},
....
......
{x: 1526466204973, y: 15}
]