1

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

哦，是的，我在 Javascript 方面也很差，所以欢迎提供所有信息。

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

4

1 回答 1

1

欢迎来到 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>
  );
}

希望这可以帮助。

于 2018-11-13T08:53:44.210 回答