Question

使用工具提示和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>

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

Answer 1

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

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

此代码对我有用。

import inflect

result = inflect.engine().plural('bike')

工具提示无法与饼图上的activeIndex正常使用（图表）

1 个答案: