首先是中文的翻译: 使用Angular 9和Chart.js制作多个堆叠柱状图
然后给出代码示例: HTML文件:
TS文件:
import { Component, OnInit } from '@angular/core';
import { ChartDataSets, ChartOptions, ChartType } from 'chart.js';
import { Label } from 'ng2-charts';
@Component({
selector: 'app-bar-chart',
templateUrl: './bar-chart.component.html',
styleUrls: ['./bar-chart.component.css']
})
export class BarChartComponent implements OnInit {
constructor() { }
ngOnInit() {
}
barChartOptions: ChartOptions = {
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true,
ticks: {
beginAtZero: true,
}
}]
}
};
barChartLabels: Label[] = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
barChartType: ChartType = 'bar';
barChartLegend = true;
barChartData: ChartDataSets[] = [
{ data: [65, 59, 80, 81, 56, 55, 40, 30, 20, 10, 15, 35], label: 'Series A' },
{ data: [28, 48, 40, 35, 43, 50, 60, 70, 80, 90, 100, 120], label: 'Series B' },
{ data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120], label: 'Series C' }
];
}
上一篇:Angular9Chart.jslinechartwithmultiplelinebydatebased
下一篇:Angular9从Angular8升级时出现在路径中导入的ModuleName内部的OtherModule中的意外值,请添加@NgModule注释的问题