仪表盘API

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

演示

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

图表 - 仪表盘

导入

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

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

Props

原生组件的 Props 也可用。

名称	类型	默认值	描述
cornerRadius	number \| string	0	应用于弧形角的半径（类似于边框半径）。设置为 '50%' 以获得圆形弧。
cx	number \| string	-	弧形中心的 x 坐标。可以是数字（以 px 为单位）或带有百分比的字符串，例如 '50%'。 '100%' 是绘图区域的宽度。
cy	number \| string	-	弧形中心的 y 坐标。可以是数字（以 px 为单位）或带有百分比的字符串，例如 '50%'。 '100%' 是绘图区域的高度。
disableAxisListener	bool	false	如果为 `true`，图表将不监听鼠标移动事件。这可能会破坏交互功能，但会提高性能。
endAngle	number	360	结束角 (度)。
height	number	-	图表的 px 高度。如果未定义，则采用父元素的高度。
innerRadius	number \| string	'80%'	圆心与弧线起点的半径。可以是数字（以 px 为单位）或带有百分比的字符串，例如 '50%'。 '100%' 是适合绘图区域的最大半径。
margin	{ bottom?: number, left?: number, right?: number, top?: number }	object 取决于图表类型。	SVG 和绘图区域之间的边距。它用于为额外信息（例如 x 轴和 y 轴或图例）留出一些空间。接受具有可选属性的对象：`top`、`bottom`、`left` 和 `right`。
outerRadius	number \| string	'100%'	圆心与弧线终点的半径。可以是数字（以 px 为单位）或带有百分比的字符串，例如 '50%'。 '100%' 是适合绘图区域的最大半径。
startAngle	number	0	起始角 (度)。
value	number	-	仪表盘的值。设置为 `null` 以不显示值。
valueMax	number	100	仪表盘的最大值。
valueMin	number	0	仪表盘的最小值。
width	number	-	图表的 px 宽度。如果未定义，则采用父元素的宽度。

ref 被转发到根元素。

CSS 类

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

类名	规则名	描述
.MuiGauge-referenceArc	referenceArc	应用于显示可用值范围的弧形的样式。
.MuiGauge-root	root	应用于根元素的样式。
.MuiGauge-valueArc	valueArc	应用于显示值的弧形的样式。
.MuiGauge-valueText	valueText	应用于值文本的样式。

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

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

源代码

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