Chart.js rest上的管理图表

我需要做一个网页来完成我的uni，我已经完成了90%的工作，但是，我正在努力让自定义迭代器和图表正常工作。 我试图使用Recharts，但我不知道如何让它收集我想要的信息（我需要它来获得注册用户的数量和他们接种的疫苗的数量），但我在文档上看到的只是现成的结果，我不确定ChartJS是否能使它更好，即使它能做到，我对自定义迭代器的工作方式感到困惑，因为我从另一个StackOverflow问题中获取了一个“分析”，然而这是我最不担心的，因为这似乎比让实际图表工作更简单。 我将非常感谢您的帮助，因为我有两周的时间来完成这项工作，我一直坚持着这一点，而让这项工作顺利进行至关重要

哦，是的，我也非常不擅长Javascript，所以欢迎提供所有信息

编辑：忘了说我已经到处看了，但是很多都是简单的静态的东西，而不是数据库计数之类的东西。

欢迎来到SO

1） Recharts需要一个需要迭代和显示的数组。所以我通常做的是让图表组件成为列表组件的子组件。 2） 当用户从下拉列表中选择不同的选项时，我使用列表页面上的过滤器选择不同的图表组件（以防您的分析页面需要显示同一页面中的不同图表） ^^这对于JS新手来说有点棘手，但是如果你想进入它，这是非常简单的。 3） 对你来说，我认为最好的办法是为每个页面制作不同的列表组件和资源，并在它们自己的页面上显示不同的图表

export const AnalyticsList = (props) => {
  return (
    <List title="Analytics" {...props} perPage={20} sort={{ field: 'id', order: 'ASC' }}>
      <Analytics />
    </List>
  )
}

导出常量分析列表=（道具）=>{ 返回( ) } 下面是分析组件的工作原理

import React from 'react';
import {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} from 'recharts';

export const Analytics = (props) => {
    return (
      <BarChart width={800} height={400} data={Object.values(props.data)} margin={{top: 5, right: 30, left: 20, bottom: 5}}>
         <XAxis dataKey="name"/>
         <YAxis dataKey="charLimit" />
         <CartesianGrid strokeDasharray="3 3"/>
         <Tooltip/>
         <Legend />
         <Bar dataKey="charLimit" fill="#82ca9d" />
      </BarChart>
  );
}

从“React”导入React；
从“recharts”导入{BarChart、Bar、XAxis、YAxis、CartesianGrid、工具提示、图例}；
导出常量分析=（道具）=>{
返回(
);
}

希望这有帮助