AmCharts柱状图实现点击单个柱子高亮功能求助

嘿，这个问题很常见——你现在的代码只给点击的柱子添加了高亮样式，但没有把之前点击过的柱子恢复到默认状态，所以就会出现多个柱子同时高亮的情况。

下面是修复后的方案，核心思路是每次点击时先重置所有柱子的样式，再单独高亮当前点击的柱子：

方案一：使用AmCharts API操作（推荐） #

直接用AmCharts提供的属性设置方法，比手动操作DOM更稳定，也更贴合框架的设计：

"listeners": [{
  "event": "clickGraphItem",
  "method": function(event) {
    const chart = event.target;
    // 遍历所有图表中的图形系列，重置每个柱子的样式
    chart.graphs.forEach(graph => {
      graph.dataItems.forEach(item => {
        // 恢复柱子的默认填充和边框颜色（使用系列本身的配置颜色）
        item.columnGraphics.set("fill", graph.fill);
        item.columnGraphics.set("stroke", graph.stroke);
      });
    });

    // 高亮当前点击的柱子
    const clickedItem = event.item;
    clickedItem.columnGraphics.set("fill", "#8198b4");
    clickedItem.columnGraphics.set("stroke", "#8198b4");
  }
}]

方案二：直接操作DOM元素 #

如果你更习惯直接操作DOM，也可以修改你的原有代码，先重置所有柱子的样式：

"listeners": [{
  "event": "clickGraphItem",
  "method": function(event) {
    const chart = event.target;
    // 重置所有柱子的DOM样式
    chart.graphs.forEach(graph => {
      graph.dataItems.forEach(item => {
        const node = item.columnGraphics.node.lastChild;
        // 替换成你柱子原本的默认颜色
        node.setAttribute("stroke", "#你的默认边框色");
        node.setAttribute("fill", "#你的默认填充色");
      });
    });

    // 设置当前点击柱子的高亮样式
    const node = event.item.columnGraphics.node.lastChild;
    node.setAttribute("stroke","#8198b4");
    node.setAttribute("fill","#8198b4");
  }
}]

小提示 #

• 如果你不确定柱子的默认颜色，可以在图表初始化后，打印graph.fill和graph.stroke的值来获取，或者直接查看你定义图表时配置的颜色。
• 也可以额外维护一个变量记录上一次点击的柱子，下次点击时只重置那一个柱子的样式，这样性能会更好一点，适合数据量较大的图表：

let lastHighlightedItem = null;

"listeners": [{
  "event": "clickGraphItem",
  "method": function(event) {
    const clickedItem = event.item;
    const graph = clickedItem.graph;

    // 重置上一次高亮的柱子
    if (lastHighlightedItem) {
      lastHighlightedItem.columnGraphics.set("fill", graph.fill);
      lastHighlightedItem.columnGraphics.set("stroke", graph.stroke);
    }

    // 高亮当前柱子
    clickedItem.columnGraphics.set("fill", "#8198b4");
    clickedItem.columnGraphics.set("stroke", "#8198b4");

    // 更新记录的高亮柱子
    lastHighlightedItem = clickedItem;
  }
}]

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