轴

本指南将向你展示如何自定义图表组件的 x 轴和 y 轴。

¥This guide will show you how to customize the x and y axis of the charts component.

X 轴

¥X-Axis

自定义刻度格式

¥Custom Tick Formatting

要格式化 X 轴上的标签（例如，根据语言环境将月份从 January 缩写为 Jan）：

¥To format the labels on the X-axis (e.g., abbreviate months from January to Jan based on locale):

<XAxis dataKey="date" tickFormatter={chart.formatDate({ month: "short" })} />

旋转 X 轴标签

¥Rotate X-Axis Labels

如果标签重叠，请旋转它们以提高可读性：

¥If labels overlap, rotate them for better readability:

<XAxis dataKey="name" angle={-45} textAnchor="end" />

调整 X 轴内边距

¥Adjust X-Axis Padding

控制第一个和最后一个刻度标签之间的间距：

¥Control the spacing between the first and last tick labels:

<XAxis dataKey="name" padding={{ left: 20, right: 20 }} />

隐藏 X 轴

¥Hide X-Axis

如果你需要完全移除 X 轴：

¥If you need to remove the X-axis completely:

<XAxis hide />

自定义 X 轴标签

¥Custom X-Axis Labels

使用函数渲染自定义标签：

¥Render custom labels using a function:

<XAxis dataKey="name" tick={{ fontSize: 12, fill: "blue" }} />

Y 轴

¥Y-Axis

设置域名

¥Set Domain

手动定义最小值和最大值：

¥Define the minimum and maximum values manually:

<YAxis domain={[0, "dataMax + 100"]} />

格式标签

¥Format Labels

例如，将值转换为百分比：

¥For example, converting values to percentages:

<YAxis tickFormatter={(value) => `${value}%`} />

调整宽度

¥Adjust Width

控制分配给 Y 轴标签的空间：

¥Control the space allocated to Y-axis labels:

<YAxis width={50} />

隐藏 Y 轴

¥Hide Y-Axis

要从图表中移除 Y 轴：

¥To remove the Y-axis from the chart:

<YAxis hide />

自定义网格线

¥Custom Grid Lines

启用或移除绑定到 Y 轴的网格线：

¥Enable or remove grid lines tied to the Y-axis:

<YAxis tickLine={false} axisLine={false} />

其他自定义设置

¥Additional Customizations

多个 X 轴或 Y 轴

¥Multiple X or Y Axes

在单个图表中叠加多个轴：

¥Overlay multiple axes in a single chart:

<YAxis yAxisId="left" orientation="left" stroke="#8884d8" />
<YAxis yAxisId="right" orientation="right" stroke="#82ca9d" />

参考线

¥Reference Lines

使用引用线高亮特定值：

¥Highlight a specific value with a reference line:

<ReferenceLine y={1000} stroke="red" label="Threshold" />

轴刻度和线条

¥Axis Ticks and Lines

将刻度线和轴线设置为 false 以移除它们。

¥Remove the tick and axis lines by setting them to false.

<XAxis tickLine={false} axisLine={false} />
<YAxis tickLine={false} axisLine={false} />