转换 Python datetime.timedelta 对象以便 Recharts 读取

Question

我正在尝试在 Recharts（使用 React）和 Flask（使用 Formula1 API）中绘制基本图。我在 Flask 中获得的数据最初是一个 datetime.timedelta 对象，我无法将其发送到 React。要发送数据，它需要 JSON 可序列化，所以我尝试将其转换为：

一个字符串（属于 timedelta 对象）
一个整数（timedelta 转换为纳秒）

但我不确定如何在 React 中解压这些。

这是我尝试过的 2 种数据格式。

>>> data_str = [{
     "LapNumber": '0',
     "44": "0 days 00:01:27.440000",
     "6": "0 days 00:01:27.313000"},
    {"name": '1',
     "44": "0 days 00:01:28.982000",
     "6":  "0 days 00:01:27.504000"
     }]
>>> data_int = [{
         "LapNumber": '0',
         "44": 87440000000,
         "6": 87313000000},
        {"LapNumber": '1',
         "44": 88982000000,
         "6":  87504000000
         }]

app.py

@app.route('/api/lap_number_time')
def getChartData():
    # data = list of dictionaries in one of the formats shown above
    return jsonify(data)

App.js

useEffect(() => {
        fetch("http://127.0.0.1:5000/api/lap_number_time")
            .then((res) => res.json())
            .then((data) => {
                console.log("first chart data is", data)
                setCurrentChartData(data)
            })
    }, [])

...
<LineChart width={400} height={400} data={currentChartData}>
    <Line type="monotone" dataKey="14" stroke="#8884d8" />
    <Line type="monotone" dataKey="ham" stroke="#82ca9d" />
    <Line type="monotone" dataKey="6" stroke="#1a5d57" />
    <XAxis dataKey="LapNumber"/>
    <YAxis />
    <Legend />
</LineChart>

我的问题是：

我可以将 timedelta 对象传输到 Recharts 并在那里绘制它吗（因为每个数据点的整数转换需要很长时间）？
如果不是，我让 Recharts 在整数格式时成功绘制。但是，我需要帮助在 Recharts 中以 [%min:%sec:%millisec] 格式显示它。

Answer 1

我在这里建议您使用这些方法中的任何一种并将日期时间转换为 unix 时间戳并将其发送给 React。

然后通过Dennis Sandmark

看看这个方法

https://github.com/recharts/recharts/issues/956#issuecomment-339279600

转换 Python datetime.timedelta 对象以便 Recharts 读取

Converting Python datetime.timedelta object in order to be read by Recharts

javascript

python

reactjs

recharts