Admin-on-rest 图表

Question

我需要做一个网页来完成我的大学，我已经完成了大约 90%，但是，我正在努力让自定义迭代器和图表工作。我正在尝试使用 Recharts，但我不知道如何让它收集我想要的信息（我需要它来获取注册用户数量和他们接种的疫苗数量），但我在文档上看到的一切都已准备就绪结果，我不确定 ChartJS 是否会让它变得更好，即使它确实如此，我对自定义迭代器的工作方式感到困惑，因为我从另一个 Whosebug 问题中得到了 "Analytics" 一个，但这是我最不担心的，因为这似乎比让实际图表工作更简单。帮助将不胜感激，因为我有 2 周的时间来交付它并且我一直坚持下去，它的关键是我让它工作。

哦，是的，我在 Javascript 方面也很糟糕，所以欢迎提供任何信息。

编辑：忘了说我已经环顾四周，但其中很多都是为了更简单和静态的东西，而不是数据库计数或类似的东西。

Answer 1

欢迎来到 SO。

1) Recharts 想要一个需要迭代和显示的数组。所以我通常做的是让图表组件成为列表组件的子组件。 2) 当用户 select 从下拉列表中选择不同的选项时，我使用列表页面上的过滤器来 select 不同的图表组件（以防您的分析页面需要显示同一页面中的不同图表） ^^这对于刚接触 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>
  );
}

希望对您有所帮助。

Admin-on-rest 图表

Charts on Admin-on-rest

chart.js

admin-on-rest

react-admin

recharts