Подсказка не работает правильно с activeIndex на круговых диаграммах (ReCharts)

Круговые диаграммы, в которых используются всплывающие подсказки и активный индекс, работают неправильно. Подсказка не появится, пока вы не войдете в тот же сектор повторно. Когда вы находитесь в другом секторе, отображается предупреждение: неверный тип реквизита: неверный реквизит 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>

Активный индекс по умолчанию всегда установлен, поэтому, когда вы не находитесь в том же секторе, отображается всплывающая подсказка.


charts pie-chart recharts
person mitesh7172    schedule 10.01.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Когда вы не находитесь в том же секторе, то activeIndex автоматически изменяется и возвращает тип объекта, и на самом деле activeIndex является числовым типом, поэтому я проверяю метод shouldComponentUpdate, и он возвращает true, если activeIndex является только числом.

Поэтому, если тип activeIndex не является числом, компонент не будет обновляться, а состояние activeIndex останется таким же, как и предыдущее состояние, поэтому всплывающая подсказка не будет скрыта в любое время.

Этот код работает для меня.

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