Всплывающая подсказка не работает с ActiveIndex на круговых диаграммах (ReCharts) - PullRequest
Новая
       27

Всплывающая подсказка не работает с ActiveIndex на круговых диаграммах (ReCharts)

0 голосов
/ 10 января 2019

Круговые диаграммы, в которых используются подсказки и 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>

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

1 Ответ

0 голосов
/ 10 января 2019

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

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

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

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