Recharts 折线图不绘制数据更新的新点

Question

我有一个简单的应用程序，允许用户随时间跟踪他们的体重。当用户添加新条目时，图表会更新并且肯定会在道具中接收新数据，但不会绘制新点。

Recharts 组件：

import React from 'react';
import {
    ResponsiveContainer,
    LineChart,
    Line,
    CartesianGrid,
    XAxis,
    YAxis
} from 'recharts';
import moment from 'moment';

const TrackingChart = (props) => {
    const {
        data
    } = props

    let date_min = 0
    let date_max = 0

    if (data.length > 0) {
        date_min = data[0]['date'] - (1000 * 60 * 60 * 24)
        date_max = data.slice(-1)[0]['date'] + (1000 * 60 * 60 * 24);
    }

    const dateFormatter = date => {
        // return moment(date).unix();
        return moment(date).format('DD-MMM-YY');
    };

    return (
        <ResponsiveContainer width="100%" height={300}>
            <LineChart data={data}>
                <Line dataKey="weight" stroke="#8884d8" />
                <CartesianGrid stroke="#ccc" />
                <XAxis
                    dataKey="date"
                    scale="time"
                    type="number"
                    domain={[date_min, date_max]}
                    tickFormatter={dateFormatter} />
                <YAxis />
            </LineChart>
        </ResponsiveContainer>
    )
}

export default TrackingChart

我知道图表将新数据接收到道具中作为 x 轴更新，示例如下：

添加新数据前的图表

添加新数据后的图表

数据日期 - 2021 年 5 月 31 日重量 - 60

TrackingChart 组件肯定有更新的道具：

折线图也有更新的数据：

知道为什么图表本身没有将新数据点添加到 DOM 中的图表吗？

Answer 1

经过反复试验- 我似乎想到了一个解决方案，即向图表对象中的每个组件传递一个动态键。添加新的数据点时，key会自动加1，整个对象重新渲染。

return (
        <ResponsiveContainer 
            width="100%" 
            height={300} 
            data={data}
            key={`rc_${data.length}`}>
            <LineChart data={data} key={`lc_${data.length}`}>
                <Line dataKey="weight" stroke="#8884d8" key={`l_${data.length}`}/>              
                <CartesianGrid stroke="#ccc" />
                <XAxis
                    dataKey="date"
                    scale="time"
                    type="number"
                    domain={[date_min, date_max]}
                    tickFormatter={dateFormatter} />
                <YAxis />
            </LineChart>
        </ResponsiveContainer>
    )

最终，我可能只想传入例如最后 10 或 20 个条目，因此可能需要将键值作为传递的道具，但原理有效

Answer 2

这可能无法解决上述问题，但可能会对其他人有所帮助。

传入实时数据时，使用 React 状态。不要使用 const 对象列表并附加到它。这不会发送图表需要更新的事件。

const [data, setData] = React.useState([{ name: "", data: 0 }]);
setData((old) => [...old, { name: 'first', data: 1 }]);

然后通过你的道具传递数据。

Recharts 折线图不绘制数据更新的新点

Recharts Line chart doesn't plot new point on data update

javascript

reactjs

recharts