Google柱状图鼠标悬停时如何仅修改当前柱子的颜色？

要实现仅修改鼠标悬停的柱子颜色，你需要利用Google可视化事件传递的event对象，它能直接定位到当前被hover的柱子元素，无需遍历修改所有柱子。

修改后的完整代码 #

// 保存柱子原始颜色，用于鼠标移出时恢复
let originalFill = '';

// 绑定鼠标悬停和移出事件
google.visualization.events.addListener(chart, "onmouseover", handleMouseOver);
google.visualization.events.addListener(chart, "onmouseout", handleMouseOut);

function handleMouseOver(event) {
    // event.target 就是当前被鼠标悬停的柱子元素
    const hoveredColumn = event.target;
    // 先保存柱子原本的颜色
    originalFill = hoveredColumn.getAttribute('fill');
    
    // 修改悬停柱子的颜色（这里用红色示例，可替换为任意颜色值）
    hoveredColumn.setAttribute('fill', '#ff0000');
    // 保留你原本的圆角设置
    hoveredColumn.setAttribute("rx", 5);
    hoveredColumn.setAttribute("ry", 5);
}

function handleMouseOut(event) {
    const hoveredColumn = event.target;
    // 恢复柱子的原始颜色
    hoveredColumn.setAttribute('fill', originalFill);
    // 若需要鼠标移出时取消圆角，可取消下面两行注释
    // hoveredColumn.setAttribute("rx", 0);
    // hoveredColumn.setAttribute("ry", 0);
}

关键说明 #

• 原代码的问题：通过getElementsByTagName("rect")获取所有柱子并批量修改，导致所有元素都被影响。而event.target能直接拿到当前触发事件的柱子，精准操作单个元素。
• 必须绑定onmouseout事件：用来恢复柱子的原始样式，避免颜色或圆角永久改变。
• 颜色自定义：你可以把#ff0000换成任何合法的颜色值，比如rgb(255, 99, 71)、"blue"等。

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