Tooltip tidak berfungsi dengan benar dengan activeIndex pada diagram lingkaran (ReCharts)

Diagram lingkaran yang menggunakan Tooltip dan activeIndex tidak berfungsi dengan benar. Tooltip tidak akan muncul kecuali Anda masuk kembali ke sektor yang sama. Ketika Anda tidak berada di sektor yang sama, peringatan: Jenis prop gagal: Prop tidak valid activeIndex disuplai ke Pie akan ditampilkan.

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

Indeks aktif default selalu disetel sehingga ketika Anda tidak berada di tampilan tooltip pai sektor yang sama.


charts pie-chart recharts
person mitesh7172    schedule 10.01.2019    source sumber

Jawaban (1)


arrow_upward
1
arrow_downward

Ketika Anda tidak berada di sektor yang sama maka activeIndex diubah secara otomatis dan mengembalikan tipe objek, dan sebenarnya, activeIndex adalah tipe angka jadi saya memeriksa metode mustComponentUpdate dan mengembalikan nilai true jika activeIndex hanya angka.

Jadi jika tipe activeIndex bukan angka maka komponen tidak akan diupdate dan state activeIndex tetap sama dengan state sebelumnya, sehingga tooltip tidak disembunyikan setiap saat.

Kode ini berfungsi untuk saya.

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