Angular 9中Chart.JS多柱状图实现异常问题排查

我在Angular 9应用中集成了Chart.JS，但图表未按预期渲染。

当前实现代码 #

ngOnInit(): void {
  this.smdashboardservice.fetchSmDashboardData().subscribe(response=>{

    //let data = response.data
    let data = [
      {"label":"Application","sublabel":"Nice","count":2},
      {"label":"Application","sublabel":"poor","count":1},
      {"label":"Channels","sublabel":"Quality","count":2},
      {"label":"Customer Care","sublabel":"support","count":2}
    ]

    this.barChartLabels = Object.keys(data);
    this.barChartLabels.forEach(label => {
      this.barChartData[0].data.push(data[label]['count']);
    });

  })
}

当前图表效果 #

期望图表效果 #

问题分析与修复 #

当前代码的核心问题是数据处理逻辑错误：

• Object.keys(data)作用于数组时返回的是数组索引（0、1、2、3），导致x轴显示数字标签而非业务所需的label值
• 未对相同主label下的子分类（sublabel）分组，无法构建堆叠柱状图的结构

修复步骤与代码

1. 提取唯一主标签作为x轴标签，提取唯一子标签作为数据集分组依据
2. 按主标签和子标签匹配填充数据，无匹配项时补0
3. 在Chart配置中开启堆叠模式

修复后的组件代码：

ngOnInit(): void {
  this.smdashboardservice.fetchSmDashboardData().subscribe(response => {
    // let data = response.data
    let data = [
      {"label":"Application","sublabel":"Nice","count":2},
      {"label":"Application","sublabel":"poor","count":1},
      {"label":"Channels","sublabel":"Quality","count":2},
      {"label":"Customer Care","sublabel":"support","count":2}
    ];

    // 获取唯一的主标签作为x轴刻度
    this.barChartLabels = [...new Set(data.map(item => item.label))];
    
    // 获取唯一的子标签作为每个数据集的名称
    const uniqueSubLabels = [...new Set(data.map(item => item.sublabel))];
    
    // 构建堆叠所需的数据集
    this.barChartData = uniqueSubLabels.map(subLabel => ({
      label: subLabel,
      data: this.barChartLabels.map(mainLabel => {
        const targetItem = data.find(item => item.label === mainLabel && item.sublabel === subLabel);
        return targetItem ? targetItem.count : 0;
      })
    }));

    // 配置堆叠柱状图选项
    this.barChartOptions = {
      scales: {
        x: { stacked: true },
        y: { stacked: true }
      }
    };
  });
}

模板补充配置

确保模板中正确绑定图表参数：

<canvas baseChart
        [datasets]="barChartData"
        [labels]="barChartLabels"
        [options]="barChartOptions"
        [type]="'bar'">
</canvas>

内容的提问来源于stack exchange，提问作者Ramesh S