您对文档所说的内容是正确的,我正在尝试做同样的事情。我以这个为例进行了尝试,它应该可以工作,根据
我的 .ts中的链接: http ://www.chartjs.org/docs/latest/charts/bar.html:
public barChartData:any[]=[
{data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A', stack: '1'},
{data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B', stack: '1'},
{data: [42, 24, 71, 14, 31, 49, 30], label: 'Series C', stack: '2'}
];
public barChartLabels:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
public barChartOptions:any = {
responsive: true,
scales:{
xAxes:[{
stacked:true
}],
yAxes:[{
stacked:true
}]
}
};
public barChartType:string = 'bar';
在我的 HTML 中:
<canvas id="chart1" baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[chartType]="barChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
我为分组堆栈栏找到了这个 chart.js 示例。不幸的是,它是普通的 JS:https ://github.com/chartjs/Chart.js/blob/master/samples/charts/bar/stacked-group.html
编辑:使用我上面的代码并执行 npm install chart.js@2.6 --save -> 它直接为我工作
我在检查创建条形时是否检查了堆栈时找到了这个解决方案。它们不在我当前的版本中。