儀表圖API

React Gauge 組件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。

Demo 範例

如需此 React 組件的使用範例和詳細資訊，請造訪組件 Demo 範例頁面

圖表 - 儀表圖

Import 導入

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

閱讀關於最小化套件大小的指南，瞭解它們之間的差異。

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	結束角度 (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 轉發到根元素。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。它們在觸發特定狀態時應用於組件的插槽。

類別名稱	規則名稱	描述
.MuiGauge-referenceArc	referenceArc	應用於顯示可用值範圍的弧線的樣式。
.MuiGauge-root	root	應用於根元素的樣式。
.MuiGauge-valueArc	valueArc	應用於顯示值的弧線的樣式。
.MuiGauge-valueText	valueText	應用於值文字的樣式。

您可以使用以下自訂選項之一覆寫組件的樣式

使用全域類別名稱。
在自訂主題中使用規則名稱作為組件styleOverrides 屬性的一部分。

原始碼

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