Из файла JSON: Как создать один общий угловой компонент ng2-charts (Bar chart), который можно вызывать из разных компонентов с разными параметрами - PullRequest
Новая
       22

Из файла JSON: Как создать один общий угловой компонент ng2-charts (Bar chart), который можно вызывать из разных компонентов с разными параметрами

0 голосов
/ 28 мая 2019

Я пытаюсь создать общий компонент ng2-charts (Bar Stacked), где я могу передать данные из другого компонента, и он получит обновление. На самом деле, я хочу отображать несколько одинаковых гистограмм с разными значениями на одной странице при загрузке страницы.

Я создал один общий компонент с диаграммами ng-2 и также создал один сервис. Теперь я вызываю общий компонент из еще одного другого компонента через общую службу с другим параметром, а источник данных поступает из файла json, который я получаю через API.

Теперь, при получении, когда я выполняю console.log () и в нем отображаются мои данные.

1-я ситуация:

В моем обычном компонентном холсте html, если я напишу, [datasets] = "barChartData? BarChartData: []" , затем данные отображают на графике, но в консоли есть ошибки, такие как ОШИБКА TypeError: «this.datasets [0] не определено» и за эту ошибку все зависает, больше ничего не работает.

2-я ситуация,

В моем обычном компонентном холсте 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"
  }
]

Может кто-нибудь, пожалуйста, помогите мне в этой ситуации.

Примечание: будет несколько компонентов одного типа (с другим набором данных), которые будут одновременно вызывать общий компонент для отображения различных параметризованных данных.

1 Ответ

0 голосов
/ 29 мая 2019

Я решил вышеупомянутую проблему с помощью этой диаграммы ng2-диаграмм, не отображающей метки данных / графиков url.

Вместо использования троичногоoperator ( [datasets] = "barChartData? barChartData: []" ) в общем компоненте, если мы используем флаг (независимо от того, загружены данные или нет, в моем случае я использовал флаг с именем "загружен ") и, используя флаг в HTML-коде вызывающего компонента, как показано ниже, вышеуказанная проблема будет решена. 

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