如何创建一个可以从具有不同参数的不同组件调用的公共角度ng2-charts(条形图)组件

双唇

我正在尝试创建一个通用的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" }
      ];
    }
  }
}

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

请帮我。

Asimhashmi

您的代码的问题在于,通用组件没有从父组件(第二组件)获取数据,而是从服务使用以下组件获取了自己的数据:

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完全可重用。您可以从父组件获取图表的其他属性(labelschartType等)。

您的代码将包含其他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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在react-charts中更改条形图中条形图的宽度?

如何在charts.js中的特定条形值上对堆积条形图进行排序

如何使用e_charts()在同一图表中组合条形图和线形图?

如何使用ng2-charts获取多个图表(条形图和折线图)?

Charts.js - 值区间的不同颜色的条形图不起作用

在angular2中使用ng2-charts的水平条形图

在 R 中创建一个带有 2 个条形图的条形图

条形图[Google Charts]是否可以使用vAxis:{slantedText:true}?

带有多个条形图的条形图

两个xAxes水平条形图Charts.js

如何设置条形图/条形图的颜色?

MATLAB条形图:如何组合条形图?

从矩阵创建条形图

双条形图的创建

如何更改Google Charts API中堆积的条形图的部分颜色?

创建一个可以具有不同显示的组件

如何分隔条形图?

如何分离条形图?

可以仅在条形图中创建条形图吗?

matplotlib:为堆积条形图的每个组件提供自定义颜色

发散堆积的条形图Ember组件中的过渡行为不正确

Chart.js/Ng-charts 堆积条形图 - 在条形图上显示百分比,但在工具提示上显示实际值

在条形图中添加条形图 (ggplot2)

如何在条形图的条形图中显示值?

如何在条形图上正确放置条形图

R条形图对于某些条形图具有不同的颜色

matplotlib中具有不同宽度和颜色的条形图(Mekko条形图)

R-具有不同宽度的条形图的条形图叠加

带有来自两个不同数据框的条形图的条形图