我正在尝试创建一个通用的ng2图表(条形堆叠)组件，我可以在其中传递来自其他组件的数据，它将获得更新。实际上，我想在加载页面时在同一页面中显示多个具有不同值的相同堆叠条形图。
我已经用ng-2图表创建了一个通用组件，并创建了一个服务。现在，我通过具有不同参数的共享服务从另一个不同的组件调用公共组件，数据源来自我通过API获取的json文件。
现在，在获取时，当我在执行 console.log() 时，它正在显示我的数据。
第一种情况：
在我的常用组件画布 html 中，如果我写，[datasets]="barChartData ？ barChartData ： []">， 然后数据显示在图表中，但在控制台中，存在诸如 ERROR TypeError： "this.datasets[0] is undefined" 对于此错误，一切都冻结了，其他事情都不起作用。
第二种情况，
在我的常用组件画布 html 中，如果我写，[datasets]="barChartData"，则数据不显示">
我的公共组件(bar-chart.component.ts)，
import { Component, OnInit, Input } from "@angular/core";
import { ChartOptions, ChartType, ChartDataSets } from "chart.js";
import * as pluginDataLabels from "chartjs-plugin-datalabels";
import { Label } from "ng2-charts";
@Component({
selector: "app-common-barchart",
templateUrl: "./common-barchart.component.html",
styleUrls: ["./common-barchart.component.css"]
})
export class CommonBarchartComponent implements OnInit {
constructor() {}
public barChartOptions: ChartOptions = {
responsive: true,
// We use these empty structures as placeholders for dynamic theming.
scales: {
xAxes: [
{
stacked: true
}
],
yAxes: [{}]
},
plugins: {
datalabels: {
anchor: "center",
align: "center"
}
}
};
@Input() barChartLabels: Label[];
@Input() barChartData: ChartDataSets[];
public barChartType: ChartType = "bar";
public barChartLegend = true;
public barChartPlugins = [pluginDataLabels];
ngOnInit() {
//console.log("barChartData", this.barChartData);
}
}
我的常用组件的 html：
<div>
<div>
<div style="display: block">
<canvas
baseChart
height="400"
[datasets]="barChartData ? barChartData : []"
[labels]="barChartLabels"
[options]="barChartOptions"
[plugins]="barChartPlugins"
[legend]="barChartLegend"
[chartType]="barChartType"
>
</canvas>
</div>
</div>
</div>
组件，我从中调用公共组件(Department-wise-barchart.component.ts)
import { Component, OnInit } from "@angular/core";
import { ChartOptions, ChartType, ChartDataSets } from "chart.js";
import * as pluginDataLabels from "chartjs-plugin-datalabels";
import { Label } from "ng2-charts";
import { BarChartService } from "../../service/bar-chart.service";
@Component({
selector: "app-department-wise-barchart",
templateUrl: "./department-wise-barchart.component.html",
styleUrls: ["./department-wise-barchart.component.css"]
})
export class DepartmentWiseBarchartComponent implements OnInit {
public barChartData: ChartDataSets[];
public parentChartData: ChartDataSets[];
public myLabelsArray: Label[];
public barChartLabels: Label[];
public isDataAvailable: boolean = false;
constructor(private barchartservice: BarChartService) {}
ngOnInit() {
this.barchartservice.getBarChartDataFromJSON("dept").subscribe(response => {
this.parentChartData = response;
});
}
}
相应的 HTML (employee-band-wise-barchart.component.html)，
<app-common-barchart
[barChartData]="parentChartData"
[barChartLabels]="myLabelsArray"
></app-common-barchart>
服务文件， (bar-chart.service.ts)，
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";
@Injectable({
providedIn: "root"
})
export class BarChartService {
constructor(private http: HttpClient) {}
private _url1: string = "../../assets/chart-dummy-data/emp-band.json";
private _url2: string = "../../assets/chart-dummy-data/dept.json";
getBarChartDataFromJSON(chartType): Observable<any> {
if (chartType == "emp-band") {
return this.http.get<any>(this._url1);
} else if (chartType == "dept") {
return this.http.get<any>(this._url2);
} else {
return this.http.get<any>(this._url2);
}
}
}
My JSON file， (emp-band.json)
[
{
"data": [2, 5, 9],
"label": "Male",
"stack": "1"
},
{
"data": [4, 1, 3],
"label": "Female",
"stack": "1"
}
]
任何人都可以在上述情况下帮助我。
注意：将有多个相同类型的组件(具有不同的数据集)，它们将同时调用公共组件以显示不同的参数化数据。
我已经在这个ng2 图表条形图的帮助下解决了上述问题，不显示数据/图形标签url。
而不是在公共组件中使用三元运算符([datasets]="barChartData ？ barChartData ： []")，如果我们使用一个标志(无论数据是否加载，在我的例子中，我使用了一个名为"loaded"的标志)并在调用 compnet 的 html 中使用标志，如下所示，那么上述问题将得到解决。
<app-common-barchart
*ngIf="loaded"
[barChartData]="parentChartData"
[barChartLabels]="myLabelsArray"
></app-common-barchart>