如何创建一个通用的角度NG2-charts(条形图)组件，该组件可以从具有不同参数的不同组件中调用

Question

我正在尝试创建一个常见的ng2-charts(bar堆叠(组件，我可以在其中传递其他组件的数据，并且它将获得更新。实际上，我想在加载页面时在同一页面中显示多个具有不同值的相同堆叠的条形图。

我已经创建了一个使用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>

在第二个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" }
      ];
    }
  }
}

我期望两个不同的图表值，但是在两个组件中，它仅显示第一个组件图表值。

请帮助我。

Answer 1

您的代码问题是常见组件没有从父组件(第二个组件(获取数据，但它使用

从服务中获取自己的数据

ngOnInit() {
    this.barChartData = this.barchartservice.getBarChartData("one");
  }

一种方法是将barChartData作为Input属性以外的属性。这样，每个父组件都会将必要的数据提供给您的共同组件，而您的共同组件的作业将只是显示。您可以使用Input从组件外部获取数据。

您的代码将是这样：

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，然后将其提供给您的常见组件：

parent.component.html

<app-first-bar-chart [barChartData]="parentChartData"></app-first-bar-chart>

以这种方式，您可以在应用程序中的任何地方使用此组件，并提供数据(barchartdata(，它将显示

update

为了使您的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>