如何在Kendo UI Angular中创建堆叠柱状图？设置stack=true仍未生效

你的堆叠柱状图未生效主要有三个核心问题：数据结构不符合堆叠要求、缺少类别轴配置、数据类型错误，以下是具体修正方案：

1. 修正数据结构与类型 #

堆叠柱状图要求多个系列共享同一类别，每个系列在该类别下对应独立数值，同时数值字段必须为数字类型（你当前Value是字符串）。调整数据处理逻辑：

// app.component.ts
import { Component } from '@angular/core';

interface FindingItem {
  Value: number; // 改为数字类型
  color: string;
  status: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  // 修正原始数据类型，补充统一类别（示例为"当前发现"）
  public currentFindingsJson: FindingItem[] = [
    { Value: 3, color: "#2E75B5", status: "CAT2 (Minor)" },
    { Value: 10, color: "#2E75B5", status: "CAT1 (Minor)" }
  ];

  // 转换为堆叠所需的系列结构：每个status对应一个系列，数据绑定类别和数值
  public currentFindingsData = this.currentFindingsJson.map(item => ({
    name: item.status,
    data: [{ category: "当前发现", value: item.Value }],
    color: item.color
  }));
}

2. 完善图表模板配置 #

必须添加类别轴明确堆叠基准，同时指定数值字段，确保stack配置生效：

<!-- app.component.html -->
<kendo-chart style="height: 300px;">
  <kendo-chart-legend position="bottom" orientation="horizontal" [visible]="true"></kendo-chart-legend>

  <kendo-chart-area background="#F2FAFD"></kendo-chart-area>

  <!-- 添加类别轴，指定堆叠的基准字段 -->
  <kendo-chart-category-axis>
    <kendo-chart-category-axis-item field="category"></kendo-chart-category-axis-item>
  </kendo-chart-category-axis>

  <kendo-chart-series>
    <kendo-chart-series-item 
      type="column" 
      *ngFor="let item of currentFindingsData" 
      [data]="item.data" 
      [name]="item.name" 
      [color]="item.color"
      field="value" <!-- 指定数值字段 -->
      [stack]="true"> <!-- 启用堆叠 -->
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

关键说明 #

• 堆叠的核心是多系列共享同一类别维度，Kendo需要明确的类别轴来识别堆叠分组依据。
• 数值字段必须为数字类型，字符串无法参与堆叠计算。
• 如果需要多类别堆叠，只需在data中添加更多category不同的对象即可。

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