Angular 8：在 ng2-charts 中绘制两个条形图不适用于不同的数据集

Question

我试图使用 HTTP

中的以下代码在同一页面上绘制两个图表

<div class="chk-block-content">
    <canvas height="100"width="500" baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [colors]="barChartColors" [legend]="barChartLegend" [chartType]="barChartType"></canvas>

</div>

 <div class="chk-block-content">
    <canvas height="100"width="500" baseChart [datasets]="barChartData2" [labels]="barChartLabels" [options]="barChartOptions" [colors]="barChartColors" [legend]="barChartLegend" [chartType]="bar"></canvas>
</div>

在两个不同的块中，但是在屏幕上绘制的唯一数据集是 barChartData one.I 在我的组件 ts

中这样定义了它们

 public barChartdata2: any[]=[
      {data: [10], label: 'Series A'},
      {data: [10], label: 'Series B'}
   ]
   public barChartLabels:string[] = [ 'Enero', 


 'Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
   public barChartType:string = 'bar';
   public barChartLegend:boolean = false;
   public barChartData:any[] = [
     {data: [6500, 590, 800, 810, 560, 550, 400], label: 'Series A'},
     {data: [2800, 480, 400, 190, 860, 207, 900], label: 'Series B'}
   ];

为什么只绘制 barChartData？

有没有办法让我可视化这两个数据集？

Answer 1

几件事：

在你的TS文件中，变量名是barChartdata2，而图2中引用的变量是barChartData2（大写D）
您 HTML 中 bar 的图表类型应该是 barChartType

相关TS文件：

import { Component, OnInit } from "@angular/core";
import { ChartOptions, ChartType, ChartDataSets } from "chart.js";
import { Label } from "ng2-charts";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
public barChartData2: any[]=[
      {data: [10], label: 'Series A'},
      {data: [10], label: 'Series B'}
  /*
     {data: [6500, 590, 800, 810, 560, 550, 400], label: 'Series A'},
     {data: [2800, 480, 400, 190, 860, 207, 900], label: 'Series B'}
   */
   ];
   public barChartLabels:string[] = [ 'Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
   public barChartType:string = 'bar';
   public barChartLegend:boolean = false;
   public barChartData:any[] = [
     {data: [6500, 590, 800, 810, 560, 550, 400], label: 'Series A'},
     {data: [2800, 480, 400, 190, 860, 207, 900], label: 'Series B'}
   ];
  constructor() {  }
  ngOnInit() {}
}

工作stackblitz here

Angular 8：在 ng2-charts 中绘制两个条形图不适用于不同的数据集

Angular 8: Drawing two bar-charts in ng2-charts not working with different data sets

typescript

ng2-charts

angular