ng2-charts 中的堆积条形图

Question

我已经查看了 ng2-charts 的文档，但找不到 Stacked Bar 之类的东西。在ng2-charts中有没有其他方法可以实现堆叠条形图？请帮帮我

Answer 1

绝对支持，在 chart.js documentation 中有记录。您只需使用 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。

Answer 2

实现的简单方法'Horizontal & Vertical Stacked Bar Chart'
使用Chart 'options' 使其简单，检查代码。
在.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 上的完整代码。

ng2-charts 中的堆积条形图

Stacked Bar in ng2-charts

angular

typescript

charts

stacked-chart

ng2-charts