来自 JSON 文件：如何创建一个通用的 Angular ng2-charts（条形图）组件，该组件可以从具有不同参数的不同组件调用

Question

我正在尝试创建一个通用的 ng2-charts (Bar Stacked) 组件，我可以在其中传递来自其他组件的数据并且它会得到更新。实际上，我想在加载页面时在同一页面中显示多个具有不同值的堆叠条形图。

我用 ng-2 图表创建了一个通用组件，还创建了一项服务。现在我通过具有不同参数的共享服务从另一个不同的组件调用公共组件，数据源来自我通过 API 获取的 json 文件。

现在，在获取时，当我在执行 console.log() 时，它正在显示我的数据。

第一种情况：

在我常用的组件canvas html中，如果我写的话， [数据集]="barChartData ? barChartData : []", 然后 数据在图表中显示，但在控制台中，出现如下错误 错误类型错误：“this.datasets[0] 未定义” 对于这个错误，一切都被冻结了，没有其他东西可以工作。

第二种情况，

在我常用的组件canvas 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);
    }
  }  
}

我的 json 文件，(emp-band.json)

[
  {
    "data": [2, 5, 9],
    "label": "Male",
    "stack": "1"
  },
  {
    "data": [4, 1, 3],
    "label": "Female",
    "stack": "1"
  }
]

任何人都可以帮助我解决上述情况。

注意：会有多个相同类型的组件（具有不同的数据集）会同时调用公共组件以显示不同的参数化数据。

Answer 1

在这个 ng2-charts bar graph not displaying data/graph labels 网址的帮助下，我已经解决了上述问题。

如果我们在公共组件中使用标志（无论是否加载数据，在我的情况下，我使用了一个名为“已加载”的标志）并在调用组件的 html 中使用该标志，如下所示，那么上述问题将得到解决。

<app-common-barchart
  *ngIf="loaded"
  [barChartData]="parentChartData"
  [barChartLabels]="myLabelsArray"
></app-common-barchart>