如何使用Ng2-Charts在Angular中实现聚类堆叠柱状图？

完全可以实现类似附图的聚类堆叠柱状图效果，Ng2-Charts基于Chart.js，而Chart.js原生支持这种「聚类+堆叠」复合的柱状图类型。

你的代码思路方向正确，通过stack属性分组堆叠系列，但存在几处需要修正的问题：

• data数组格式错误：存在[, ]、[28,]这类不完整的写法，每个数据项数组的长度必须和barChartLabels的长度（7个元素）一致，缺失的数值需用0填充而非留空。
• 系列标签重复：两个Series A和两个Series B会导致图例混乱，建议给每个堆叠组的系列设置区分性标签（如Series A - 组1）。
• 未配置堆叠相关的坐标轴参数：需要明确设置X轴不堆叠（实现聚类）、Y轴堆叠（组内堆叠）。

以下是修正后的完整代码示例：

import { Component, OnInit } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Label } from 'ng2-charts';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  public barChartOptions: ChartOptions = {
    responsive: true,
    scales: {
      x: {
        stacked: false // 关闭X轴堆叠，让不同组的柱形并排显示（聚类）
      },
      y: {
        stacked: true // 开启Y轴堆叠，让同组内的系列堆叠
      }
    }
  };
  public barChartLabels: Label[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  public barChartType: ChartType = 'bar';
  public barChartLegend = true;
  public barChartPlugins = [];

  public barChartData: ChartDataSets[] = [
    { data: [10, 20, 30, 40, 50, 60, 70], label: 'Series A - 组1', stack: 'group1' },
    { data: [28, 35, 42, 50, 58, 65, 72], label: 'Series B - 组1', stack: 'group1' },
    { data: [85, 75, 65, 55, 45, 35, 25], label: 'Series A - 组2', stack: 'group2' },
    { data: [38, 48, 58, 68, 78, 88, 98], label: 'Series B - 组2', stack: 'group2' },
  ];

  constructor() { }

  ngOnInit() { }
}

关键实现逻辑 #

• 利用stack属性：将需要堆叠的系列标记为同一stack值，不同stack值对应不同的聚类柱形。
• 坐标轴配置：scales.x.stacked = false实现不同堆叠组的并排聚类，scales.y.stacked = true实现同组内的数值堆叠。
• 数据完整性：确保每个data数组的元素数量与标签数量匹配，避免渲染异常。

内容的提问来源于stack exchange，提问作者LINUS ELIAS GEORGE JOSE