简体   繁体   English

Recharts 折线图没有 plot 数据更新的新点

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

I have a simple app that allows users to track their weight over time.我有一个简单的应用程序,允许用户随时间跟踪他们的体重。 When a user adds a new entry, the chart updates and is definitely receiving the new data in the props, but isn't plotting the new point.当用户添加新条目时,图表会更新并且肯定会在道具中接收新数据,但不会绘制新点。

Recharts component:图表组件:

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

I know the chart received the new data into props as the x-axis updates, example below:我知道图表将新数据接收到道具中作为 x 轴更新,示例如下:

Chart before adding new data添加新数据前的图表添加新数据点之前的图表

Chart after adding new data添加新数据后的图表

data date - 31-May-2021 weight - 60数据日期 - 2021 年 5 月 31 日体重 - 60

添加新数据后的图表

The TrackingChart component definitely has the updated props: TrackingChart组件肯定有更新的道具: 在此处输入图像描述

And the LineChart has the updated data also:折线图也有更新的数据: 在此处输入图像描述

Any ideas why the chart itself doesn't add the new datapoint to the chart in the DOM?图表本身不向 DOM 中的图表添加新数据点的任何想法?

After a bit of trial and error - I seem to have come up with a solution, which is to pass a dynamic key to each component in the chart object.经过一番反复试验 - 我似乎想出了一个解决方案,即将动态密钥传递给图表 object 中的每个组件。 When a new data point is added, the key will automatically increment by 1, and so the whole object re-renders.添加新数据点时,key 会自动加 1,因此整个 object 会重新渲染。

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

Eventually, I probably only want to pass in eg the last 10 or 20 entries, so will probably need to make the key value a prop to pass down, but the priciple works最终,我可能只想传入例如最后 10 或 20 个条目,因此可能需要将键值作为传递的道具,但原则有效

This may not solve the problem above, but this may help others.这可能无法解决上述问题,但这可能会帮助其他人。

When passing in live data, use React state. Do not use a const list of objects and append to it.传入实时数据时,使用 React state。不要使用常量对象列表和 append。 This won't send an event that the chart needs to be updated.这不会发送图表需要更新的事件。

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

Then pass data through your props.然后通过你的道具传递数据。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM