要在Angular中使用Chart.js和ng2-charts库创建水平柱状图,并显示柱旁边的值,可以按照以下步骤操作:
npm install chart.js --save
npm install ng2-charts --save
import { Component } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Label } from 'ng2-charts';
@Component({
selector: 'app-horizontal-bar-chart',
templateUrl: './horizontal-bar-chart.component.html',
styleUrls: ['./horizontal-bar-chart.component.css']
})
export class HorizontalBarChartComponent {
public barChartOptions: ChartOptions = {
responsive: true,
};
public barChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
public barChartType: ChartType = 'horizontalBar';
public barChartLegend = true;
public barChartPlugins = [];
public barChartData: ChartDataSets[] = [
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }
];
}
:host {
display: block;
height: 400px;
width: 100%;
}
通过按照上述步骤进行操作,你将能够创建一个水平柱状图,并在柱旁边显示值。