ChartsYAxisAPI
React ChartsYAxis 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。
演示
导入
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
// or
import { ChartsYAxis } from '@mui/x-charts';
// or
import { ChartsYAxis } from '@mui/x-charts-pro';
通过阅读关于最小化 bundle size 的指南了解更多信息。
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
axisId | number | string | - | 要渲染的坐标轴的 id。如果未定义,则为第一个定义的坐标轴。 |
classes | object | - | 覆盖或扩展应用于组件的样式。 请参阅下面的 CSS 类 API 以了解更多详情。 |
disableLine | bool | false | 如果为 true,则禁用轴线。 |
disableTicks | bool | false | 如果为 true,则禁用刻度线。 |
fill | string | 'currentColor' | 轴文本的填充颜色。 |
label | string | - | 坐标轴的标签。 |
labelFontSize | number | 14 | 轴标签的字体大小。 |
labelStyle | object | - | 应用于轴标签的样式。 |
position | 'left' | 'right' | - | 坐标轴的位置。 |
slotProps | object | {} | 用于每个组件插槽的 props。 |
slots | object | {} | 可覆盖的组件插槽。 请参阅下面的 Slots API 以了解更多详情。 |
stroke | string | 'currentColor' | 轴线的描边颜色。 |
tickFontSize | number | 12 | 轴刻度线文本的字体大小。 |
tickInterval | 'auto' | array | func | 'auto' | 定义显示哪些刻度线。其值可以是:- 'auto' 在这种情况下,刻度线是根据轴比例和其他参数计算的。- 形式为 |
tickLabelInterval | 'auto' | func | 'auto' | 定义哪些刻度线显示其标签。其值可以是:- 'auto' 在这种情况下,如果标签不与前一个标签重叠,则会显示标签。- 形式为 (value, index) => boolean 的过滤函数。警告:索引是刻度线索引,而不是数据索引。 |
tickLabelPlacement | 'middle' | 'tick' | 'middle' | 刻度线标签的位置。可以是 band 的中间,也可以是刻度线位置。仅当比例为 'band' 时使用。 |
tickLabelStyle | object | - | 应用于刻度线文本的样式。 |
tickMaxStep | number | - | 两个刻度线之间的最大步长。当使用时间数据时,该值被假定为毫秒。分类轴(band、points)不支持。 |
tickMinStep | number | - | 两个刻度线之间的最小步长。当使用时间数据时,该值被假定为毫秒。分类轴(band、points)不支持。 |
tickNumber | number | - | 刻度线的数量。此数量不能保证。分类轴(band、points)不支持。 |
tickPlacement | 'end' | 'extremities' | 'middle' | 'start' | 'extremities' | 刻度线相对于 band 区间的位置。仅当比例为 'band' 时使用。 |
tickSize | number | 6 | 刻度线的大小。 |
这些类名对于使用 CSS 设置样式很有用。当触发特定状态时,它们将应用于组件的插槽。
类名 | 规则名称 | 描述 |
---|---|---|
.MuiChartsYAxis-bottom | bottom | 应用于底部轴的样式。 |
.MuiChartsYAxis-directionX | directionX | 应用于 x 轴的样式。 |
.MuiChartsYAxis-directionY | directionY | 应用于 y 轴的样式。 |
.MuiChartsYAxis-label | label | Styles applied to the group containing the axis label. |
.MuiChartsYAxis-left | left | 应用于左侧轴的样式。 |
.MuiChartsYAxis-line | line | 应用于主线元素的样式。 |
.MuiChartsYAxis-right | right | 应用于右侧轴的样式。 |
.MuiChartsYAxis-root | root | 应用于根元素的样式。 |
.MuiChartsYAxis-tick | tick | 应用于刻度线的样式。 |
.MuiChartsYAxis-tickContainer | tickContainer | 应用于包含刻度线及其标签的组的样式。 |
.MuiChartsYAxis-tickLabel | tickLabel | 应用于刻度线标签的样式。 |
.MuiChartsYAxis-top | top | 应用于顶部轴的样式。 |
您可以使用以下自定义选项之一来覆盖组件的样式
- 使用全局类名。
- 使用规则名称作为自定义主题中组件的
styleOverrides
属性的一部分。
源代码
如果您在此页面中找不到所需的信息,请考虑查看组件的实现以获取更多详细信息。