ChartsAxisAPI
React ChartsAxis 组件的 API 参考文档。 了解此导出模块的 props、CSS 和其他 API。
演示
导入
import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
// or
import { ChartsAxis } from '@mui/x-charts';
// or
import { ChartsAxis } from '@mui/x-charts-pro';通过阅读有关最小化 bundle size 的指南，了解它们之间的区别。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| bottomAxis | object | string | xAxisIds[0] 第一个提供的轴的 id | 指示图表底部要显示的轴。 可以是字符串（轴的 id）或对象 |
| leftAxis | object | string | yAxisIds[0] 第一个提供的轴的 id | 指示图表左侧要显示的轴。 可以是字符串（轴的 id）或对象 |
| rightAxis | object | string | null | 指示图表右侧要显示的轴。 可以是字符串（轴的 id）或对象 |
| slotProps | object | {} | 用于每个组件插槽的 props。 |
| slots | object | {} | 可覆盖的组件插槽。 有关更多详细信息，请参见下面的 Slots API。 |
| topAxis | object | string | null | 指示图表顶部要显示的轴。 可以是字符串（轴的 id）或对象 |
该组件无法保存 ref。
这些类名对于使用 CSS 设置样式很有用。 当触发特定状态时，它们将应用于组件的插槽。
| 类名 | 规则名称 | 描述 |
|---|---|---|
| .MuiChartsAxis-bottom | bottom | 应用于底部轴的样式。 |
| .MuiChartsAxis-directionX | directionX | 应用于 x 轴的样式。 |
| .MuiChartsAxis-directionY | directionY | 应用于 y 轴的样式。 |
| .MuiChartsAxis-label | label | 应用于包含轴标签的组的样式。 |
| .MuiChartsAxis-left | left | 应用于左侧轴的样式。 |
| .MuiChartsAxis-line | line | 应用于主线元素的样式。 |
| .MuiChartsAxis-right | right | 应用于右侧轴的样式。 |
| .MuiChartsAxis-root | root | 应用于根元素的样式。 |
| .MuiChartsAxis-tick | tick | 应用于刻度的样式。 |
| .MuiChartsAxis-tickContainer | tickContainer | 应用于包含刻度和其标签的组的样式。 |
| .MuiChartsAxis-tickLabel | tickLabel | 应用于刻度标签的样式。 |
| .MuiChartsAxis-top | top | 应用于顶部轴的样式。 |
您可以使用以下自定义选项之一来覆盖组件的样式
- 使用全局类名。
- 使用作为自定义主题中组件的
styleOverrides属性一部分的规则名称。
源代码
如果您在此页面中找不到所需的信息，请考虑查看组件的实现以获取更多详细信息。