问题描述: 在使用Angular 8和ng2-charts库绘制两个条形图时,发现无法同时使用不同的数据集。
解决方法:
npm install ng2-charts chart.js --save
import { Component, OnInit } from '@angular/core';
import { ChartDataSets, ChartOptions } from 'chart.js';
import { Color, Label } from 'ng2-charts';
public barChartOptions: ChartOptions = {
responsive: true,
};
public barChartLabels: Label[] = ['Data Set 1', 'Data Set 2'];
public barChartData: ChartDataSets[] = [
{ data: [10, 20], label: 'Data Set 1' },
{ data: [30, 40], label: 'Data Set 2' }
];
public barChartColors: Color[] = [
{ backgroundColor: 'rgba(255,0,0,0.3)' },
{ backgroundColor: 'rgba(0,255,0,0.3)' }
];
import { ChartsModule } from 'ng2-charts';
@NgModule({
imports: [
ChartsModule
],
declarations: [
YourComponent
]
})
export class YourModule { }
现在,你应该能够在Angular 8中绘制两个条形图,并使用不同的数据集。