跳到内容

ChartsXAxisAPI

React ChartsXAxis 组件的 API 参考文档。 了解此导出模块的 props、CSS 和其他 API。

演示

导入

import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
// or
import { ChartsXAxis } from '@mui/x-charts';
// or
import { ChartsXAxis } from '@mui/x-charts-pro';

通过阅读关于最小化 bundle size 的指南，了解它们之间的区别。

Props

名称类型默认值描述
axisIdnumber
| string		-

要渲染的轴的 id。 如果未定义，则它将是第一个定义的轴。

classesobject-

覆盖或扩展应用于组件的样式。

有关更多详细信息，请参阅下面的CSS 类 API。

disableLineboolfalse

如果为 true，则禁用轴线。

disableTicksboolfalse

如果为 true，则禁用刻度线。

fillstring'currentColor'

轴文本的填充颜色。

labelstring-

轴的标签。

labelFontSizenumber14

轴标签的字体大小。

labelStyleobject-

应用于轴标签的样式。

position'bottom'
| 'top'		-

轴的位置。

slotPropsobject{}

用于每个组件插槽的 props。

slotsobject{}

可覆盖的组件插槽。

有关更多详细信息，请参阅下面的Slots API。

strokestring'currentColor'

轴线的描边颜色。

tickFontSizenumber12

轴刻度线文本的字体大小。

tickInterval'auto'
| array
| func		'auto'

定义显示哪些刻度线。 其值可以是： - 'auto' 在这种情况下，刻度线是根据轴比例和其他参数计算的。 - 形式为 (value, index) => boolean 的过滤函数，仅当轴具有“point”比例时才可用。 - 包含应显示刻度线的值的数组。

tickLabelInterval'auto'
| func		'auto'

定义哪些刻度线显示其标签。 其值可以是： - 'auto' 在这种情况下，如果标签不与前一个标签重叠，则会显示标签。 - 形式为 (value, index) => boolean 的过滤函数。 警告：索引是刻度索引，而不是数据索引。

tickLabelPlacement'middle'
| 'tick'		'middle'

刻度线标签的位置。 可以是条带的中间，也可以是刻度线位置。 仅当比例为“band”时使用。

tickLabelStyleobject-

应用于刻度线文本的样式。

tickMaxStepnumber-

两个刻度线之间的最大步长。 当使用时间数据时，该值被假定为以毫秒为单位。 不支持分类轴（band、points）。

tickMinStepnumber-

两个刻度线之间的最小步长。 当使用时间数据时，该值被假定为以毫秒为单位。 不支持分类轴（band、points）。

tickNumbernumber-

刻度线的数量。 此数字不能保证。 不支持分类轴（band、points）。

tickPlacement'end'
| 'extremities'
| 'middle'
| 'start'		'extremities'

刻度线相对于条带间隔的位置。 仅当比例为“band”时使用。

tickSizenumber6

刻度线的大小。

该组件不能持有 ref。

CSS 类

这些类名对于使用 CSS 设置样式很有用。 当触发特定状态时，它们将应用于组件的插槽。

类名规则名称描述
.MuiChartsXAxis-bottombottom应用于底部轴的样式。
.MuiChartsXAxis-directionXdirectionX应用于 x 轴的样式。
.MuiChartsXAxis-directionYdirectionY应用于 y 轴的样式。
.MuiChartsXAxis-labellabel应用于包含轴标签的组的样式。
.MuiChartsXAxis-leftleft应用于左侧轴的样式。
.MuiChartsXAxis-lineline应用于主线元素的样式。
.MuiChartsXAxis-rightright应用于右侧轴的样式。
.MuiChartsXAxis-rootroot应用于根元素的样式。
.MuiChartsXAxis-ticktick应用于刻度线的样式。
.MuiChartsXAxis-tickContainertickContainer应用于包含刻度线及其标签的组的样式。
.MuiChartsXAxis-tickLabeltickLabel应用于刻度线标签的样式。
.MuiChartsXAxis-toptop应用于顶部轴的样式。

您可以使用以下自定义选项之一覆盖组件的样式

源代码

如果您在此页面中找不到信息，请考虑查看组件的实现以获取更多详细信息。