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

Question

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

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

<LineChart width={600} height={200} data={chartData}>
<Line type="monotone" dataKey="temp" stroke="#fc7f03" name="Temperature" unit=" °C"/>
<CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
<XAxis dataKey="date" tick={{fontSize: 10, fill: 'orange'}} tickFormatter={(unixTime) => moment(unixTime).format('DD.MM - HHч.')}/>
<YAxis />
<Tooltip />
</LineChart>

Examples on recharts

Answer 1

如果您查看他们的示例，您会发现他们有一个组件 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