Recharts柱状图：鼠标悬停时如何修改Cell/柱子的填充颜色？

当然可以做到！你只需要通过组件状态跟踪当前被悬停的柱子索引，然后在渲染Cell的时候动态切换颜色就行，不用只局限于修改光标样式。下面是具体的实现步骤和修改后的代码：

步骤说明 #

• 首先在组件的状态里新增一个hoveredIndex，用来记录当前悬停的柱子索引，初始值设为-1（表示没有柱子被悬停）
• 新增鼠标移入和移出的事件处理函数，更新hoveredIndex的状态
• 在渲染Cell时，判断当前柱子的索引是否等于hoveredIndex，如果是则使用悬停颜色，否则保持原来的颜色逻辑

修改后的完整代码 #

// 先定义你需要的悬停颜色，比如这里用深灰色
const HOVER_COLOR = '#333333';

class YourChartComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mouseX: 0,
      hoveredIndex: -1 // 新增状态：跟踪悬停的柱子索引
    };
  }

  getMouseX = (e) => {
    this.setState({ mouseX: e.clientX });
  };

  // 新增：处理鼠标移入柱子的事件
  handleBarMouseOver = (index) => {
    this.setState({ hoveredIndex: index });
  };

  // 新增：处理鼠标移出柱子的事件
  handleBarMouseOut = () => {
    this.setState({ hoveredIndex: -1 });
  };

  render() {
    const { data } = this.props;
    return (
      <BarChart 
        width={868} 
        height={40} 
        data={data} 
        margin={{top:0, bottom: 10, left:0, right:0}} 
        barSize={5}
      >
        <Tooltip 
          labelStyle={{ textAlign: 'left' }} 
          cursor={{fill: "blue"}} 
          position={{ x: this.state.mouseX - 20, y:-5 }} 
        />
        <Bar 
          dataKey="blocks" 
          onMouseOver={(e) => {
            this.getMouseX(e);
            // 获取当前悬停的柱子索引
            const index = e.dataIndex;
            this.handleBarMouseOver(index);
          }}
          onMouseOut={this.handleBarMouseOut}
        >
          { data.map((entry, index) => {
            const result = entry.result > 4 ? TRASH : NO_TRASH;
            // 动态判断颜色：如果是当前悬停的柱子，用HOVER_COLOR，否则用原来的result颜色
            const cellFill = index === this.state.hoveredIndex ? HOVER_COLOR : result;
            return <Cell fill={cellFill} key={index}/>;
          }) }
        </Bar>
      </BarChart>
    );
  }
}

关键改动点 #

• 新增了hoveredIndex状态来跟踪悬停位置
• 在Bar组件上绑定了onMouseOut事件，确保鼠标离开后恢复原颜色
• 在onMouseOver事件中获取当前柱子的dataIndex，并更新状态
• 渲染Cell时根据hoveredIndex动态切换填充颜色

这样就能实现鼠标悬停时单独改变对应柱子的颜色啦！

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