คีย์ข้อมูลที่มีรูปแบบคำอธิบายแผนภูมิไม่ตรงกัน

คุณสามารถสร้างคำแนะนำเครื่องมือแบบกำหนดเองที่จะแทนที่คำแนะนำเริ่มต้นได้ นี่คือตัวอย่างวิธีที่คุณสามารถตั้งค่าคำแนะนำเครื่องมือที่กำหนดเองได้

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

นี่คือตัวอย่างเคล็ดลับเครื่องมือแบบกำหนดเอง

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;

เพย์โหลดประกอบด้วยค่าต่างๆ สำหรับคุณ มันจะเป็นค่าของแบตเตอรี่ cpu และอื่นๆ Label คือการประทับเวลาซึ่งคุณสามารถแปลงเป็นข้อความที่อ่านง่ายขึ้นโดยใช้วิธีเดียวกับที่คุณใช้สำหรับป้ายกำกับแกนขีด