ChartsReferenceLineAPI

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

演示

有关此 React 组件用法的示例和详细信息，请访问组件演示页面

图表 - 坐标轴

导入

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

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

Props

名称	类型	默认值	描述
axisId	number \| string	第一个定义的坐标轴的 `id`。	用于参考值的坐标轴的 id。
classes	object	-	覆盖或扩展应用于组件的样式。有关更多详细信息，请参阅下面的 CSS 类 API。
label	string	-	沿参考线显示的标签。
labelAlign	'end' \| 'middle' \| 'start'	'middle'	如果标签在图表绘图区域中，则为对齐方式。
labelStyle	object	-	应用于标签的样式。
lineStyle	object	-	应用于线条的样式。
spacing	number \| { x?: number, y?: number }	5	标签周围的额外空间，单位为 px。可以是数字或对象 `{ x, y }`，以区分与参考线的空间和与坐标轴的空间。
x	Date \| number \| string	-	与参考线关联的 x 值。如果已定义，则参考线将是垂直的。
y	Date \| number \| string	-	与参考线关联的 y 值。如果已定义，则参考线将是水平的。

该组件不能持有 ref。

CSS 类

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

类名	规则名称	描述
.MuiChartsReferenceLine-horizontal	horizontal	如果参考线是水平的，则应用于根元素的样式。
.MuiChartsReferenceLine-label	label	应用于参考标签的样式。
.MuiChartsReferenceLine-line	line	应用于参考线的样式。
.MuiChartsReferenceLine-root	root	应用于根元素的样式。
.MuiChartsReferenceLine-vertical	vertical	如果参考线是垂直的，则应用于根元素的样式。

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

使用全局类名。
在自定义主题中，使用规则名称作为组件的 styleOverrides 属性的一部分。

源代码

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