Recharts 图例不匹配格式化数据键答案

【问题标题】：Rechart legend mismatch formated datakeyRecharts 图例不匹配格式化数据键
【发布时间】：2019-01-21 01:04:04
【问题描述】：

我正在使用 Recharts 构建包含以下数据的图表：

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

我正在构建我的图表

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

显示工具提示时出现问题，我们可以看到标题与刻度格式化程序不匹配

那么，我怎样才能使两者匹配，因为它们基本上是相同的信息？

【问题讨论】：

标签： javascript reactjs recharts

【解决方案1】：

您可以创建一个自定义工具提示来替换一个默认工具提示。以下是如何设置自定义工具提示的示例。

<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 等的值。标签是时间戳，您可以使用与刻度轴标签相同的方法将其转换为更易读的文本。

【讨论】：