Angular 如何使用ng2图表和API正确显示数据
你好,你能帮我吗?我试图在Angular应用程序中使用ng2图表显示数据,我从Firebase的API获取数据,但它不起作用,我不知道我做错了什么 我得到的数据如下所示:Angular 如何使用ng2图表和API正确显示数据,angular,firebase,api,graphics,Angular,Firebase,Api,Graphics,你好,你能帮我吗?我试图在Angular应用程序中使用ng2图表显示数据,我从Firebase的API获取数据,但它不起作用,我不知道我做错了什么 我得到的数据如下所示: { "2017": { "bebes": 67, "hombres": 20, "mujeres": 30 }, "2018": { "bebes": 33, "hombres": 10, "mujeres"
{
"2017": {
"bebes": 67,
"hombres": 20,
"mujeres": 30
},
"2018": {
"bebes": 33,
"hombres": 10,
"mujeres": 49
},
"2019": {
"bebes": 45,
"hombres": 20,
"mujeres": 34
}
我知道,太满了
我创建了一个服务来获取数据,只需使用metro
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class VentasService {
private url = 'https://dbb-fa0a5.firebaseio.com/data.json';
constructor(private http: HttpClient) {
}
getVentas() {
return this.http.get(this.url);
}
}
}
这是带有图形栏的组件
import { Component } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Label } from 'ng2-charts';
import { VentasService } from '../../../../services/ventas.service';
@Component({
selector: 'app-bar-grafic',
templateUrl: './bar-grafic.component.html',
styles: []
})
export class BarGraficComponent {
year_2017: any = []
year_2018: any = []
year_2019: any = []
constructor(private ventas : VentasService){
this.ventas.getVentas().subscribe( (data : any) =>{
this.year_2017 = data['2017']
this.year_2018 = data['2018']
this.year_2019 = data['2019']
// testing
console.log(this.year_2017.mujeres);
})
}
public barChartOptions: ChartOptions = {
responsive: true,
// We use these empty structures as placeholders for dynamic theming.
scales: { xAxes: [{}], yAxes: [{}] },
plugins: {
datalabels: {
anchor: 'end',
align: 'end',
}
}
};
public barChartLabels: Label[] = ['2017', '2018', '2019'];
public barChartType: ChartType = 'bar';
public barChartLegend = true;
public barChartData: ChartDataSets[] = [
{ data: [this.year_2019.mujeres, this.year_2018.mujeres, this.year_2017.mujeres], label: 'Mujeres' },
{ data: [this.year_2019.hombres, this.year_2018.hombres, this.year_2017.hombres], label: 'Hombres' },
{ data: [this.year_2019.bebes, this.year_2018.bebes, this.year_2017.bebes], label: 'Bebes' }
];
public refresh(): void {
this.ventas.getVentas().subscribe( (data : any) =>{
this.year_2017 = data['2017']
this.year_2018 = data['2018']
this.year_2019 = data['2019']
console.log(this.year_2017.mujeres);
})
}
}
如果我尝试在控制台中打印它,一切看起来都很好,但图形没有显示数据
我真的不知道为什么:我检查了您的代码,发现问题是您在数据从服务到达之前将数据分配给barChartData。由于您的服务正在执行异步操作,因此需要将分配数据的代码移到subscribe块中 就像您的服务是一个异步任务一样,我正在使用计时器操作符添加异步行为 请查找以下代码:
import { Component, OnInit } from "@angular/core";
import { ChartOptions, ChartType, ChartDataSets } from "chart.js";
import { Label } from "ng2-charts";
import { timer } from "rxjs";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
year_2017: any = [];
year_2018: any = [];
year_2019: any = [];
public barChartData: ChartDataSets[] = [];
constructor() {
timer(1000).subscribe((data: any) => {
this.year_2017 = { mujeres: 10, hombres: 20, bebes: 30 };
this.year_2018 = { mujeres: 5, hombres: 10, bebes: 15 };
this.year_2019 = { mujeres: 2, hombres: 4, bebes: 6 };
// testing
console.log(this.year_2017.mujeres);
this.barChartData = [
{
data: [
this.year_2019.mujeres,
this.year_2018.mujeres,
this.year_2017.mujeres
],
label: "Mujeres"
},
{
data: [
this.year_2019.hombres,
this.year_2018.hombres,
this.year_2017.hombres
],
label: "Hombres"
},
{
data: [
this.year_2019.bebes,
this.year_2018.bebes,
this.year_2017.bebes
],
label: "Bebes"
}
];
});
}
public barChartOptions: ChartOptions = {
responsive: true,
// We use these empty structures as placeholders for dynamic theming.
scales: { xAxes: [{}], yAxes: [{}] },
plugins: {
datalabels: {
anchor: "end",
align: "end"
}
}
};
public barChartLabels: Label[] = ["2017", "2018", "2019"];
public barChartType: ChartType = "bar";
public barChartLegend = true;
}