圖表 - 儀表板
儀表板圖表讓使用者評估指標。
基本概念
儀表板顯示在定義範圍內變化的數值。
按下 Enter 開始編輯
數值範圍
儀表板的值透過 value 屬性提供，該屬性接受介於 0 到 100 之間的數值範圍。若要修改它，請使用 valueMin 和 valueMax 屬性。
按下 Enter 開始編輯
弧形配置
使用以下屬性修改弧形形狀
startAngle和endAngle：以度為單位提供的角度範圍innerRadius和outerRadius：弧形的半徑。它可以是固定的像素數或百分比字串，表示最大可用半徑的百分比cornerRadius：它可以是固定的像素數或百分比字串，表示最大可用半徑的百分比
import { Gauge } from '@mui/x-charts/Gauge';
<Gauge
value={75}
startAngle={0}
endAngle={360}
innerRadius="80%"
outerRadius="100%"
// ...
/>範例
文字配置
預設情況下，儀表板會在弧形中心顯示數值。若要修改它，請使用 text 屬性。
此屬性可以是字串或格式化函式。在第二種情況下，格式化函式的參數包含 value、valueMin 和 valueMax。
若要修改文字的版面配置，請使用 gaugeClasses.valueText 類別名稱。
import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge';
<Gauge
value={75}
startAngle={-110}
endAngle={110}
sx={{
[`& .${gaugeClasses.valueText}`]: {
fontSize: 40,
transform: 'translate(0px, 0px)',
},
}}
text={
({ value, valueMax }) => `${value} / ${valueMax}`
}
/>範例
弧形設計
若要自訂儀表板樣式，請使用 chartsGaugeClasses 匯出以從組件的不同部分（例如 valueText、valueArc 和 referenceArc）提取類別名稱。
如需完整的參考清單，請造訪API 頁面。
按下 Enter 開始編輯
新增元素
使用預設儀表板
若要將更多元素插入儀表板，第一個選項是將它們新增為子元素，這表示它們將堆疊在預設渲染之上。
import { Gauge } from '@mui/x-charts/Gauge';
<Gauge value={25} valueMax={50}>
<AddedElement />
</Gauge>;
使用儀表板容器
第二個選項是使用儀表板模組內提供的以下元素
- 儀表板參考弧形
- 儀表板數值弧形
- 儀表板數值文字
import {
GaugeContainer,
Gauge,
GaugeReferenceArc,
GaugeValueArc,
} from '@mui/x-charts/Gauge';
<GaugeContainer value={25} valueMax={50}>
<GaugeReferenceArc />
<GaugeValueArc />
<AddedElement />
</GaugeContainer>;
建立您的組件
若要建立您自己的組件，請使用 useGaugeState Hook，它提供您關於儀表板配置所需的一切資訊
- 關於數值的資訊：
value、valueMin、valueMax - 繪製弧形的資訊：
startAngle、endAngle、outerRadius、innerRadius、cornerRadius、cx和cy - 計算值
maxRadius：可容納繪圖區域的最大半徑valueAngle：與目前數值相關聯的角度
按下 Enter 開始編輯
無障礙功能
MUI X 儀表板符合 Meter ARIA 模式，其中包括將 meter 角色新增至父容器，以及正確使用 aria-valuenow、aria-valuemin 和 aria-valuemax 屬性。
標籤
如果可見的標籤可用，請透過新增 aria-labelledby 屬性來參考它。否則，可以透過 aria-label 手動提供標籤。
呈現方式
輔助技術通常以百分比呈現數值。這可以透過提供 aria-valuetext 屬性來修改。
例如，電池電量指示器最好使用一小時的持續時間。
<h3 id="battery_level_label">
Battery level
</h3>
<Gauge
value={6}
valueMax={12}
aria-labelledby="battery_level_label"
aria-valuetext="50% (6 hours) remaining"
/>