如何在 React 中使用 recharts 和 100% 拉伸宽度在 xAxis 上定位所有日期？

问题描述

1.我想在 xAxis 上垂直定位所有日期（每 3 小时 5 天）？

2.我想在屏幕上拉伸 100% 宽度和 600 像素高度的图形？

App.get_running_app().root.current = 'Settings'

Examples on recharts

解决方法

如果你检查他们的例子，你会发现他们有一个组件 https://recharts.org/en-US/api/ResponsiveContainer

响应式容器

可以从

导入

“重新图表”

然后像在他们的例子中一样使用它

<ResponsiveContainer width="100%" height="100%">
        <LineChart
          width={500}
          height={300}
          data={data}
          margin={{
            top: 5,right: 30,left: 20,bottom: 5,}}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip />
          <Legend />
          <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} />
          <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
        </LineChart>
      </ResponsiveContainer>

您还可以设置 XAxis 的设置。

在此处查看文档 https://recharts.org/en-US/api/XAxis#tickCount