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';

瞭解更多關於最小化套件大小的指南。

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。

原始碼

如果您在此頁面中找不到資訊，請考慮查看組件的實作以取得更多詳細資訊。