如何为AmCharts 5堆叠柱状图的柱形添加点击跳转链接？

核心思路 #

在AmCharts 5中，需为每个堆叠柱形（或分段）的模板绑定点击事件，结合数据中的URL字段实现跳转。以下是具体步骤：

1. 为数据集添加URL字段 #

在数据中为每个堆叠分段对应添加URL字段（比如url1、url2，匹配不同堆叠系列的值字段value1、value2）：

const data = [
  {
    category: "分类A",
    value1: 20,
    url1: "https://example.com/a1",
    value2: 30,
    url2: "https://example.com/a2"
  },
  {
    category: "分类B",
    value1: 15,
    url1: "https://example.com/b1",
    value2: 25,
    url2: "https://example.com/b2"
  }
];

2. 为堆叠系列绑定点击事件 #

AmCharts 5的堆叠柱状图通常由多个ColumnSeries组成，每个系列对应一个堆叠层。为每个系列的柱形模板添加点击事件监听器：

// 初始化第一个堆叠系列
const series1 = chart.series.push(
  am5xy.ColumnSeries.new(root, {
    name: "系列1",
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "value1",
    categoryXField: "category",
    stacked: true
  })
);
series1.data.setAll(data);

// 绑定点击事件并设置指针样式
series1.columns.template.events.on("click", (event) => {
  const targetUrl = event.target.dataItem.dataContext.url1;
  if (targetUrl) {
    window.open(targetUrl, "_blank"); // 新窗口打开，也可改用window.location.href直接跳转
  }
});
series1.columns.template.set("cursorOverStyle", "pointer");

// 初始化第二个堆叠系列（逻辑同理）
const series2 = chart.series.push(
  am5xy.ColumnSeries.new(root, {
    name: "系列2",
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "value2",
    categoryXField: "category",
    stacked: true
  })
);
series2.data.setAll(data);

series2.columns.template.events.on("click", (event) => {
  const targetUrl = event.target.dataItem.dataContext.url2;
  if (targetUrl) {
    window.open(targetUrl, "_blank");
  }
});
series2.columns.template.set("cursorOverStyle", "pointer");

3. 批量处理多个堆叠系列（可选） #

若堆叠系列较多，可通过循环统一绑定事件，减少重复代码：

// 定义系列配置集合
const seriesConfigs = [
  { name: "系列1", valueField: "value1", urlField: "url1" },
  { name: "系列2", valueField: "value2", urlField: "url2" },
  // 可添加更多系列配置
];

seriesConfigs.forEach(config => {
  const series = chart.series.push(
    am5xy.ColumnSeries.new(root, {
      name: config.name,
      xAxis: xAxis,
      yAxis: yAxis,
      valueYField: config.valueField,
      categoryXField: "category",
      stacked: true
    })
  );
  series.data.setAll(data);
  
  series.columns.template.events.on("click", (event) => {
    const targetUrl = event.target.dataItem.dataContext[config.urlField];
    if (targetUrl) {
      window.open(targetUrl, "_blank");
    }
  });
  series.columns.template.set("cursorOverStyle", "pointer");
});

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