reactjs - 带有 React 的 Ant Design G2Plot 中的 DualAxisChar

Question

最近，我想在我的项目中绘制一个双轴图表，并且我希望它在从服务器获取新数据时动态变化。

import React, { useState, useEffect, useRef } from 'react';
import { DualAxesChart } from '@opd/g2plot-react';

const ModelStatus = (props) => {
  const dualAxisRef = useRef();

  const modelData = props.location.state ? props.location.state.modelData : null;
  const modelId = modelData.id;

  const [modelLogData, setModelLogData] = useState([]);

  const logDualConfig = {
    data: [modelLogData, modelLogData],
    xField: 'iteration',
    yField: ['mAP', 'avgLoss'],
    meta: {
        iteration: {
            tickInterval: 1,
            range: [0, 1],
            formatter: (v) => {
                return v.split('/')[0];
            },
        },
        mAP: {
            range: [0, 1],
        },
        avgLoss: {
            range: [1, 0],
            alias: 'Loss',
        },
    },
    animation: {
        appear: {
            animation: 'path-in',
            duration: 1500,
        },
    },
  };

  useEffect(() => {
    const trainingLogInterval = setInterval(() => {
        api.getModelTrainLog(modelId)
            .then((response) => {
                const data = response.data.training_log;
                const modelData = [];
                data.map((log) => {
                    modelData.push({ ...log });
                });
                setModelLogData(modelData);

                // Dynamic chart with changeData API in Ant Design G2Plot
                dualAxisRef.current.changeData(modelData);
            })
    }, 3000);
    return () => clearInterval(trainingLogInterval);
  }, []);
}

在这里，我想使用 Ant Design G2Plot 中的 API，但这似乎不起作用，如示例所示，我该如何修改它？谢谢你。