React Recharts - 如何为折线图添加过滤器？

问题描述

在 nextjs 应用程序中，我尝试添加 recharts https://recharts.org/en-US/examples/SimpleLineChart。现在我想为 1 天、1 周、1 个月等图表添加过滤器选项。如何自定义图表？或者我可以使用不同的插件来支持我的要求吗？请建议我。另外，如何将时间和日期 02:30pm 10 01,2021 添加到数据中？当鼠标悬停在图形上时应该显示（边缘）。

现在我已经尝试过使用静态数据的示例图，例如

const data = [
 {
  name: 'Page A',uv: 4000,pv: 2400,amt: 2400,},{
  name: 'Page B',uv: 3000,pv: 1398,amt: 2210,{
  name: 'Page C',uv: 2000,pv: 9800,amt: 2290,]
return(
  <LineChart
      width={900}
      height={250}
      data={data}
      margin={{
        top: 35,right: 30,left: 20,bottom: 5,}}
    >
      <Tooltip />
      <Legend />
      <Line type="monotone" dataKey="uv" stroke="#4ec6f4" activeDot={{ r: 8 }} />
   </LineChart>
 )

还有如何为Tooltip添加自定义内容？

解决方法

关于工具提示的问题， ${n} months}/>