Recharts 自定义 XAxis 名称

Question

最近才开始学习 React 和 React Native for Web。我尝试使用 Recharts 库制作折线图。我希望图表中显示所有 XAxis 名称； 10 点，11 点 ... 24 点。

这是我的线数据。 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 width="100%" 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 }}
                  // width="-100"
                  // 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시消失了。你能帮我解决我遗漏或错误的部分吗？非常感谢您的帮助！

Answer 1

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

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

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

Recharts 自定义 XAxis 名称

Recharts Customized XAxis name

reactjs

styled-components

recharts

react-native-web