Memetakan ulang kunci data yang diformat dengan legenda yang tidak cocok

Saya menggunakan Recharts untuk membuat grafik dengan data berikut:

id: "mock-device"
props:
  battery: 2,
  cpuUsage: 11,
  diskUsage: 23,
  memoryUsage: 8,
timestamp: 1548031944

dan saya sedang membuat grafik saya

<AreaChart data={DataGraphs} margin={{ top: 0, right: 0, bottom: 0, left: -30 }}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="timestamp" tickFormatter={e => (new Date(e * 100).toLocaleTimeString())} />
  <YAxis />
  <Tooltip />
  <Legend />
  <Area dataKey={battery} stroke="#f3a000" fill="#ffc658" />
  <Area dataKey={cpu} stroke="#e4002b" fill="#ff0131a3" />
  <Area dataKey={memory} stroke="#0ea800" fill="#0ea8008c" />
  <Area dataKey={diskUsage} stroke="#009cff" fill="#5abefd" />
</AreaChart>

Masalah terjadi ketika tooltip ditampilkan, seperti yang kita lihat judulnya tidak cocok dengan formatter centang

masukkan deskripsi gambar di sini

Jadi, bagaimana saya bisa membuat keduanya cocok karena pada dasarnya informasinya sama?


reactjs javascript recharts
person vbotio    schedule 21.01.2019    source sumber

Jawaban (1)


arrow_upward
1
arrow_downward

Anda dapat membuat tooltip khusus yang menggantikan tooltip default. Berikut adalah contoh bagaimana Anda dapat menyetel tooltip khusus.

<AreaChart width={width} height={height} data={this.data}>
    <Tooltip content={<CustomTooltip />} />
  // Rest of graph configuration here
</AreaChart>);

Berikut adalah contoh tip alat khusus.

import React, { Component } from 'react';
class CustomTooltip extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        var { active } = this.props;
        if (active) {
            const { payload, label } = this.props;
            return (
                <div>
                    <div>{payload[0].value + ' ft'}</div>
                    <div>{label + ' mi'} </div>
                </div>
            );
        }
        return null;
    }
}
export default CustomTooltip;

Payload berisi berbagai nilai. Bagi Anda itu akan menjadi nilai baterai, cpu, dan lain-lain. Label adalah cap waktu yang dapat Anda ubah menjadi teks yang lebih mudah dibaca menggunakan metode yang sama yang Anda gunakan untuk label sumbu centang.

person Alex Wurts    schedule 21.01.2019