有什么方法可以将 API 数据映射或表示为 ReactJS 中的图表吗？

Question

我正在使用 API 数据，使用 React 图表以图形表示形式显示它。 API 数据如下所示：

0:
CPSA: "0.00"
CRSA: "0.00"
XBA: "0.00"
XSA: "0.00"
audbal: "1.00"
audnet: "1.00"
date: "2021-12-25T05:31:40.497Z"
xnaaud: "0.0100000000"
xnabal: "100.0000000000"
__v: 0
_id: "617d00f1e85e769931f42483"
[[Prototype]]: Object
1:
CPSA: "11.81"
CRSA: "40.95"
XBA: "20.00"
XSA: "0.00"
audbal: "73.76"
audnet: "72.76"
date: "2021-12-25T06:11:14.824Z"
xnaaud: "0.0119063760"
xnabal: "6195.0000000000"
__v: 0
_id: "61c6b6025547fdf4cd6ecb6c"

我想将 xnaaud 和日期属性映射到图表上。我正在使用代码：

const [Data, setData] = useState([]);
    const data = {
            labels: [Data.date],
            datasets: [
              {
                label: 'XNA/AUD',
                fill: false,
                lineTension: 0.0,
                backgroundColor: 'rgb(41, 33, 116,0.5)',
                borderColor: 'rgb(41, 33, 116,0.5)',
                pointHitRadius: 20,
                data:[parseFloat(Data.xnaaud)],
              },
            ]
          };
     useEffect(() => {
            async function fetchBooks() {
              const response = await fetch('/audlogget');
              const json = await response.json();
              setData(json.al);
              console.log(json.al)
          }
          fetchBooks();
      },[]);
    if(!Data)
    {
      return <Loading/>;
    }
      return (
        <div className="chart">
          <Line data={data} />
        </div>
      )
    }

但问题是图表中没有显示这些值。该图在使用 API 数据时不显示任何内容，但在为标签和数据提供静态值时它正在工作。代码中有什么问题？

Answer 1

Data 似乎是一个对象数组，您提到的结构是 API 数据。在那种情况下，此数据必须 mapped 到单独的数组才能获得 data.labels 和唯一的 dataset.

的 data

这可以按如下方式完成：

const data = {
  labels: Data.map(o => o.date), // first change
  datasets: [{
    label: 'XNA/AUD',
    fill: false,
    lineTension: 0.0,
    backgroundColor: 'rgb(41, 33, 116,0.5)',
    borderColor: 'rgb(41, 33, 116,0.5)',
    pointHitRadius: 20,
    data: Data.map(o => parseFloat(o.xnaaud)) // second change
  }]
};

有什么方法可以将 API 数据映射或表示为 ReactJS 中的图表吗？

Is there any method to map or represent API data to Chart in ReactJS?

reactjs

chart.js

react-chartjs-2