我已经阅读了ng2-charts的文档,但是我没有找到类似于Stacked Bar(堆积条形图)
的东西。是否有其他方法可以在ng2-charts
中实现堆积条形图?请帮帮我。
我已经阅读了ng2-charts的文档,但是我没有找到类似于Stacked Bar(堆积条形图)
的东西。是否有其他方法可以在ng2-charts
中实现堆积条形图?请帮帮我。
这绝对是支持的,它在 chart.js
的 文档 中有记录。您只需要使用 datasets
对象上的 stack
属性定义哪些数据集要堆叠在一起:
public barChartData: ChartDataSets[] = [
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A', stack: 'a' },
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B', stack: 'a' }
];
查看此StackBlitz示例。
实现“水平和垂直堆叠条形图”的简单方法
使用图表“选项”使其变得简单,检查代码。
在.ts文件中
public barChartOptions = {
scaleShowVerticalLines: false,
responsive: true,
scales: {
xAxes: [
{
stacked: true,
ticks: {
stepSize: 1
}
}
],
yAxes: [
{
stacked: true,
}
]
},
};
在模板中
<canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType"> </canvas>
请查看Stackblitz上的完整代码。