AnyChart Firebase - PullRequest
Новая
       8

AnyChart Firebase

0 голосов
/ 16 мая 2018

Я новичок в библиотеке графиков 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();
});

Может кто-нибудь, пожалуйста, посоветовать? Ваша помощь очень ценится.

1 Ответ

0 голосов
/ 17 мая 2018

Этот код должен быть изменен следующим образом: 

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