Angular 13中amCharts v5甘特图重复生成相同类别行问题求助

要让相同category的任务堆叠在同一行并消除多余空行，核心是修正数据校验和图表配置逻辑，具体步骤如下：

1. 校验并统一数据的category字段 #

确保所有需要堆叠的任务的category字段值完全一致：

• 排查大小写差异（如"项目A"和"项目a"）
• 清理首尾空格（如"项目A "和"项目A"）
• 过滤掉category为空、undefined或空白字符串的无效任务数据

示例过滤代码：

// rawData为本地JSON加载的原始数据
const filteredData = rawData.filter(item => {
  return item.category && item.category.trim() !== "";
});

2. 配置甘特图系列的堆叠属性 #

创建GanttSeries时必须显式开启stacked: true，确保同category的任务垂直堆叠：

const series = chart.series.push(
  am5gantt.GanttSeries.new(root, {
    name: "任务",
    xAxis: xAxis,
    yAxis: yAxis,
    valueField: "value",
    openValueField: "openValue",
    categoryField: "category",
    nameField: "name",
    stacked: true // 关键：开启任务堆叠
  })
);

3. 确保Y轴（分类轴）使用去重后的类别列表 #

如果手动给Y轴设置数据源，必须传入去重后的category列表，避免重复渲染相同类别行：

// 从过滤后的数据中提取唯一类别
const uniqueCategories = [...new Set(filteredData.map(item => item.category))];
// 设置Y轴数据
yAxis.data.setAll(uniqueCategories.map(cat => ({ category: cat })));

完整示例代码 #

import * as am5 from "@amcharts/amcharts5";
import * as am5gantt from "@amcharts/amcharts5/gantt";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";

export class GanttComponent implements OnInit, OnDestroy {
  private root!: am5.Root;

  ngOnInit(): void {
    this.initGanttChart();
  }

  private initGanttChart(): void {
    const root = am5.Root.new("gantt-chart-container");
    root.setThemes([am5themes_Animated.new(root)]);

    // 创建甘特图容器
    const chart = root.container.children.push(
      am5gantt.GanttChart.new(root, {
        panX: true,
        panY: true,
        wheelX: "panX",
        wheelY: "zoomX"
      })
    );

    // 配置时间轴（X轴）
    const xAxis = chart.xAxes.push(
      am5gantt.DateAxis.new(root, {
        baseInterval: { timeUnit: "day", count: 1 },
        renderer: am5.AxisRendererX.new(root, {})
      })
    );

    // 配置分类轴（Y轴）
    const yAxis = chart.yAxes.push(
      am5gantt.CategoryAxis.new(root, {
        categoryField: "category",
        renderer: am5.AxisRendererY.new(root, {})
      })
    );

    // 加载并处理本地JSON数据
    const rawData = require("./tasks.json"); // 替换为你的本地JSON路径
    const filteredData = rawData.filter(item => item.category?.trim());
    const uniqueCategories = [...new Set(filteredData.map(item => item.category))];
    yAxis.data.setAll(uniqueCategories.map(cat => ({ category: cat })));

    // 创建堆叠甘特图系列
    const series = chart.series.push(
      am5gantt.GanttSeries.new(root, {
        name: "任务",
        xAxis: xAxis,
        yAxis: yAxis,
        valueField: "value",
        openValueField: "openValue",
        categoryField: "category",
        nameField: "name",
        stacked: true
      })
    );

    series.data.setAll(filteredData);

    // 配置提示框
    series.columns.template.set("tooltipText", "{name}: [bold]{openValueX}[/] 至 [bold]{valueX}[/]");

    this.root = root;
  }

  ngOnDestroy(): void {
    this.root?.dispose();
  }
}

关键注意事项 #

• 不要给Y轴设置重复的category数据，否则会生成多余行
• 确保categoryField在Y轴和系列中的配置完全一致
• 若仍有空行，检查是否存在隐藏的任务（如时间范围为0或超出可视区域）

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