角度 8:在 ng2 图表中绘制两个条形图，不适用于不同的数据集

Question

我试图使用下面的代码在同一页面上绘制两个图表

<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>

在两个不同的块中，但是在屏幕中绘制的唯一数据集是条形图数据。我已经在我的组件 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'}
];

为什么条形图数据只被绘制？

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

Answer 1

几件事：

• 在 TS 文件中，变量名为barChartdata2，而第二个图表中引用的变量为barChartData2(大写 D(
• HTML 中bar的图表类型应barChartType

相关网页：

<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]="barChartType"></canvas>
</div>

相关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() {}
}

在这里工作堆栈闪电战