Recharts 自定义 XAxis 名称

Posted 2023-03-15

【中文标题】Recharts 自定义 XAxis 名称

【英文标题】：Recharts Customized XAxis name

【发布时间】：2022-01-08 16:17:53

【问题描述】：

这些天我刚刚开始学习 React 和 React Native for Web。我尝试使用 Recharts Library 制作 LineChart。我希望所有 XAxis 名称都应该显示在图表中； 10 月，11 月 ... 24 月。

这是我的 LineData。 name 是 XAsis 标签名称，UV 是它的值。

let lineData = [
     name: "10시", uv: 44 ,
     name: "11시", uv: 32 ,
     name: "12시", uv: 14 ,
     name: "13시", uv: 14 ,
     name: "14시", uv: 14 ,
     name: "15시", uv: 34 ,
     name: "16시", uv: 4 ,
     name: "17시", uv: 54 ,
     name: "18시", uv: 14 ,
     name: "19시", uv: 0 ,
     name: "20시", uv: 34 ,
     name: "21시", uv: 54 ,
     name: "22시", uv: 14 ,
     name: "23시", uv: 24 ,
     name: "24시", uv: 34 ,
  ];

在折线图中，我使用 ResponsiveContainer、XAsis 和 YAxis 来自定义图表。

这是我的代码

<ResponsiveContainer  height=250>
              <LineChart
                data=lineData
                margin= top: 20, right: 0, left: -15, bottom: 5 
              >
                <Line type="monotone" dataKey="uv" stroke="red" />
                <XAxis
                  dataKey="name"
                  tick= fontSize: 10 
                  // 
                  // ticks=[
                  //   10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24,
                  // ]
                  // domain=[10, 24]
                />
                <YAxis tick= fontSize: 10  ticks=[0, 10, 20, 30, 40] />
              </LineChart>
            </ResponsiveContainer>

我上面提到的，XAsis 名称应该全部显示在图表中，但部分名称仅显示为这样。

10 月、12 月、14 月、16 月、18 月、20 月、22 月、23 月消失。 你能帮我解决我遗漏或错误的部分吗？ 非常感谢您的帮助！

【参考方案1】：

我认为因为您将 ResponsiveContainer 的宽度设置为 100%，并且您在窄屏幕中呈现此图，Recharts 会自动剪切一些 x 轴值。

您是否尝试过为 XAxis 添加间隔道具？ 如果在 XAxis 组件中设置interval=0，即使屏幕不够宽，你也可以在屏幕上看到所有的 x 轴值。

<XAxis
  dataKey="name"
  tick= fontSize: 10 
  interval=0
/>

【讨论】：

索引完全正常！非常感谢！