我正在尝试创建一个通用的ng2-charts(条形码堆叠)组件,在这里我可以传递其他组件的数据,它将得到更新。实际上,我想在加载页面时在同一页面中显示多个具有不同值的相同堆叠的条形图。
我用ng-2图表创建了一个通用组件,还创建了一项服务。现在,我通过具有不同参数的共享服务从另一个不同的组件调用公共组件,但是它始终显示第一个组件的值。
我的第一个组件(bar-chart.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-bar-chart",
templateUrl: "./bar-chart.component.html",
styleUrls: ["./bar-chart.component.css"]
})
export class BarChartComponent implements OnInit {
public barChartOptions: ChartOptions = {
responsive: true,
// We use these empty structures as placeholders for dynamic theming.
scales: {
xAxes: [
{
stacked: true
}
],
yAxes: [
{
stacked: true
}
]
},
plugins: {
datalabels: {
anchor: "end",
align: "end"
}
}
};
public barChartLabels: Label[] = [
"2006",
"2007",
"2008",
"2009",
"2010",
"2011",
"2012"
];
public barChartType: ChartType = "bar";
public barChartLegend = true;
public barChartPlugins = [pluginDataLabels];
public barChartData: ChartDataSets[] = [];
constructor(private barchartservice: BarChartService) {}
ngOnInit() {
this.barChartData = this.barchartservice.getBarChartData("one");
}
// events
public chartClicked({
event,
active
}: {
event: MouseEvent;
active: {}[];
}): void {
console.log(event, active);
}
public chartHovered({
event,
active
}: {
event: MouseEvent;
active: {}[];
}): void {
console.log(event, active);
}
public randomize(): void {
// Only Change 3 values
const data = [
Math.round(Math.random() * 100),
59,
80,
Math.random() * 100,
56,
Math.random() * 100,
40
];
this.barChartData[0].data = data;
}
}
在第一个bar-chart.component.html中,
<div style="display: block">
<canvas
baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[plugins]="barChartPlugins"
[legend]="barChartLegend"
[chartType]="barChartType"
>
</canvas>
</div>
在second-bar-chart.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-second-bar-chart",
templateUrl: "./second-bar-chart.component.html",
styleUrls: ["./second-bar-chart.component.css"]
})
export class SecondBarChartComponent implements OnInit {
public barChartData: ChartDataSets[] = [];
constructor(private barchartservice: BarChartService) {}
ngOnInit() {
this.barChartData = this.barchartservice.getBarChartData("two");
}
}
在second-bar-chart.component.html中,
<h3>This is 2nd Bar Chart</h3>
<app-bar-chart></app-bar-chart>
在服务(bar-chart.service.ts)中,我这样写,
import { Injectable } from "@angular/core";
@Injectable({
providedIn: "root"
})
export class BarChartService {
constructor() {}
getBarChartData(chartType) {
if (chartType == "one") {
return [
{ data: [65, 59, 80, 81, 56, 55, 40], label: "Series A", stack: "1" },
{ data: [28, 48, 40, 19, 86, 27, 90], label: "Series B", stack: "1" }
];
} else {
return [
{ data: [40, 59], label: "Male", stack: "1" },
{ data: [90, 48], label: "Female", stack: "1" }
];
}
}
}
我期望两个不同的图表值,但是在两个组件中,它仅显示第一个组件图表值。
请帮我。
您的代码的问题在于,通用组件没有从父组件(第二组件)获取数据,而是从服务使用以下组件获取了自己的数据:
ngOnInit() {
this.barChartData = this.barchartservice.getBarChartData("one");
}
一种方法是barChartData
将组件作为Input
属性移出。这样,每个父组件将为您的公共组件提供必要的数据,而您的公共组件的工作就是仅显示它。您可以用来Input
从组件外部获取数据。
您的代码将如下所示:
条形图.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";
import { BarChartService } from "../service/bar-chart.service";
@Component({
selector: "app-bar-chart",
templateUrl: "./bar-chart.component.html",
styleUrls: ["./bar-chart.component.css"]
})
export class BarChartComponent implements OnInit {
@Input() barChartData: ChartDataSets[]; // <- note this line
public barChartOptions: ChartOptions = {
responsive: true,
// We use these empty structures as placeholders for dynamic theming.
scales: {
xAxes: [
{
stacked: true
}
],
yAxes: [
{
stacked: true
}
]
},
plugins: {
datalabels: {
anchor: "end",
align: "end"
}
}
};
public barChartLabels: Label[] = [
"2006",
"2007",
"2008",
"2009",
"2010",
"2011",
"2012"
];
public barChartType: ChartType = "bar";
public barChartLegend = true;
public barChartPlugins = [pluginDataLabels];
constructor(private barchartservice: BarChartService) {}
ngOnInit() {}
// events
public chartClicked({
event,
active
}: {
event: MouseEvent;
active: {}[];
}): void {
console.log(event, active);
}
public chartHovered({
event,
active
}: {
event: MouseEvent;
active: {}[];
}): void {
console.log(event, active);
}
public randomize(): void {
// Only Change 3 values
const data = [
Math.round(Math.random() * 100),
59,
80,
Math.random() * 100,
56,
Math.random() * 100,
40
];
this.barChartData[0].data = data;
}
}
现在,在您的父组件中,您可以parentChartData
遍历Service
,然后将其提供给您的通用组件,如下所示:
parent.component.html
<app-first-bar-chart [barChartData]="parentChartData"></app-first-bar-chart>
这样,您可以在应用程序中的任何位置使用此组件,只需为其提供数据(barChartData),它将显示它
更新资料
为了使您BarChartComponent
完全可重用。您可以从父组件获取图表的其他属性(labels
,chartType
等)。
您的代码将包含其他Input
属性
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";
import { BarChartService } from "../service/bar-chart.service";
@Component({
selector: "app-bar-chart",
templateUrl: "./bar-chart.component.html",
styleUrls: ["./bar-chart.component.css"]
})
export class BarChartComponent implements OnInit {
@Input() barChartData: ChartDataSets[]; // <- note this line
@Input() labels: Label[];
@Input() chartType: ChartType;
您的组件标签将如下所示:
<app-first-bar-chart [chartType]="'bar'" [labels]="myLabelsArray" [barChartData]="parentChartData"></app-first-bar-chart>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句