html
<canvas baseChart width="800" height="800"
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[plugins]="barChartPlugins"
[colors]="barChartColors"
[legend]="barChartLegend"
[chartType]="barChartType">
</canvas>
ts
public barChartData: ChartDataSets[] = [
{ data: [65, 59, 80, 81, 56, 55, 40], label: '標槍' },
{ data: [28, 48, 40, 19, 86, 27, 90], label: '射箭' }
];
barChartOptions: ChartOptions = {
title: {
fontSize: 18,
display: true,
text: '運動比賽',
},
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: '人數'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: '成績(分)'
}
}]
},
animation: {
duration: 1000
}
};
barChartColors: Color[] = [
{
borderWidth: .5,
borderColor: '#000',
backgroundColor: '#15bf41',
},
{
borderWidth: .5,
borderColor: '#000',
backgroundColor: '#106bc5',
},
];
barChartLabels: Label[] = ['0-20', '20-40', '40-60', '60-80', '80-100'];
barChartType: ChartType = 'bar';
barChartLegend = true;
barChartPlugins = [];