如何创建一个可以从具有不同参数的不同组件调用的公共角度ng2-charts(条形图)组件 [英] How to create one common angular ng2-charts (Bar chart) component which can be call from different components with different parameter
问题描述
我正在尝试创建一个通用的ng2-charts(条形码堆叠)组件，我可以在其中传递来自其他组件的数据，并且它将获得更新.实际上，我想在加载页面时在同一页面中显示多个相同的堆叠条形图，它们具有不同的值.
I am trying to create a common ng2-charts (Bar Stacked) component, where I can pass the data from other component and it will get update. Actually, I want to display multiple same stacked bar charts with different values in the same page while loading the page.
我用ng-2图表创建了一个通用组件，还创建了一项服务.现在，我通过具有不同参数的共享服务从另一个不同的组件中调用公共组件，但是它始终显示第一个组件的值.
I have created one common component with ng-2 charts and created one service also. Now I am calling the common component from one more different component via shared service with different parameter, but it is always showing first component value.
我的第一个组件(bar-chart.component.ts)
my first component (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中，
in the first bar-chart.component.html,
<div style="display: block">
<canvas
baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[plugins]="barChartPlugins"
[legend]="barChartLegend"
[chartType]="barChartType"
>
</canvas>
</div>
在第二个bar-chart.component.ts中，
In the 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中，
in the, second-bar-chart.component.html,
<h3>This is 2nd Bar Chart</h3>
<app-bar-chart></app-bar-chart>
在服务(bar-chart.service.ts)中，我这样写，
in the service (bar-chart.service.ts), I am writing like this,
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" }
];
}
}
}
我期望两个不同的图表值，但是在两个组件中，它仅显示第一个组件图表值.
I am expecting two different charts values but in both the component, it is showing only the first component chart value.
请帮助我.
推荐答案
您的代码存在的问题是，通用组件没有从父组件(第二组件)获取数据，而是使用
The problem with your code is the common component is not getting data from the parent component(2nd component) but it is getting its own data from the service using
ngOnInit() {
this.barChartData = this.barchartservice.getBarChartData("one");
}
一种方法是在组件外部获取 barChartData 作为 Input 属性.这样，每个父组件将为您的公共组件提供必要的数据，而您的公共组件的工作就是仅显示它.您可以使用 Input 从组件外部获取数据.
One way would be to get barChartData outside of the component as Input property. In this way every parent component will give the necessary data to your common component and the job of your common component will be to just display it.
You can use Input to get data from outside of component.
您的代码将如下所示:
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";
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;
}
}
现在，在父组件中，您可以通过 Service 获取 parentChartData ，然后将其提供给您的通用组件，如下所示:
Now in your parent component you can get the parentChartData through your Service and then give it to your common component like this:
parent.component.html
<app-first-bar-chart [barChartData]="parentChartData"></app-first-bar-chart>
通过这种方式，您可以在应用程序中的任何位置使用此组件，只需向其提供数据(barChartData)，它将显示它
In this way, you can use this component anywhere in your app and just provide it with the data(barChartData) and it will display it
更新
为了使您的 BarChartComponent 完全可重用.您可以从父组件中获取图表的其他属性( labels ， chartType 等).
In order to make your BarChartComponent fully reusable. You can get the other attributes(labels, chartType etc) of your chart from the parent component.
您的代码将包含其他 Input 属性
You code will include other Input properties
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;
您的组件标签将如下所示:
And your component tag would be like this:
<app-first-bar-chart [chartType]="'bar'" [labels]="myLabelsArray" [barChartData]="parentChartData"></app-first-bar-chart>
这篇关于如何创建一个可以从具有不同参数的不同组件调用的公共角度ng2-charts(条形图)组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
