1

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

<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>

默认活动索引总是这样设置的，所以当你不在同一个扇区时，饼图工具提示就会显示出来。

4

1 回答 1

1

当您不在同一个扇区时，activeIndex 会自动更改并返回对象类型，实际上，activeIndex 是数字类型，因此我检查了 shouldComponentUpdate 方法，如果 activeIndex 仅是数字，则返回 true。

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

这段代码对我有用。

shouldComponentUpdate(nextProps, nextState) {
    return typeof nextState.activeIndex === "number";
}
于 2019-01-10T08:21:49.170 回答