时间戳

首页 > 解决方案 > AnyChart Firebase

javascript - AnyChart Firebase

问题描述

我是 AnyChart 图表库的新手。我想使用 AnyChart 绘制从 Firebase 提取的数据。我现在面临在 AnyChart 上绘制数组数据的问题。我现在面临使用以下代码从 Firebase 中提取数组数据集的问题：

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

有人可以建议吗？非常感激你的帮助。

标签： javascriptfirebasefirebase-realtime-databaseanychart

解决方案

这段代码应该这样修改：

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

推荐阅读