GaugeContainerAPI

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

演示

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

图表 - 仪表盘

导入

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

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

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	结束角度 (deg)。
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	起始角度 (deg)。
value	number	-	仪表盘的值。设置为 `null` 以不显示值。
valueMax	number	100	仪表盘的最大值。
valueMin	number	0	仪表盘的最小值。
width	number	-	图表的 px 宽度。如果未定义，则采用父元素的宽度。

该组件无法持有 ref。

源代码

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