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

Question

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

2。我想在屏幕上拉伸宽度为 100%、高度为 600 px 的图形？

<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

您可以从

导入

"recharts"

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

<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

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

How to position all dates on xAxis using recharts and stretch width on 100% in React?

javascript

reactjs

recharts