工具提示无法在饼图 (ReCharts) 上与 activeIndex 一起正常工作

Question

利用工具提示和 activeIndex 的饼图无法正常工作。除非您重新进入同一扇区，否则工具提示不会出现。当您不在同一扇区时，它会显示警告：道具类型失败：提供给 Pie.

的道具 activeIndex 无效

<PieChart
        className="pie-chart"
        width={this.props.width ? this.props.width : 500}
        height={375}
        onMouseEnter={this.onPieEnter}
      >
        <Pie
          dataKey="value"
          data={data}
          // cx={250}
          // cy={100}
          activeIndex={
            this.state.activeIndex === undefined
              ? 0
              : this.state.activeIndex
          }
          activeShape={this.renderActiveShape}
          outerRadius={
            this.state.width <= 1025 && this.state.width > 768 ? 80 : 100
          }
          innerRadius={
            this.state.width <= 1025 && this.state.width > 768 ? 65 : 85
          }
          fill="#8884d8"
          onMouseEnter={this.onPieEnter}
        >
          {data.map((entry, index) => (
            <Cell
              key={index}
              fill={this.COLORS[index % this.COLORS.length]}
            />
          ))}
        </Pie>
</PieChart>

默认活动索引始终设置为当您不在同一扇区时饼图工具提示显示。

Answer 1

当你不在同一个扇区时，activeIndex 会自动更改，它 returns 对象类型，实际上，activeIndex 是数字类型，所以我检查了 shouldComponentUpdate 方法，它 returns 如果 activeIndex 仅为数字，则为真。

因此，如果 activeIndex 类型不是数字，则组件不会更新，activeIndex 状态与之前的状态保持不变，因此工具提示不会在任何时候隐藏。

这段代码适合我。

shouldComponentUpdate(nextProps, nextState) {
    return typeof nextState.activeIndex === "number";
}

工具提示无法在饼图 (ReCharts) 上与 activeIndex 一起正常工作

Tooltip not working correctly with activeIndex on pie charts(ReCharts)

charts

pie-chart

recharts