图表 - 仪表盘图
仪表盘图表让用户评估指标。
基础知识
仪表盘显示在定义范围内变化的数值。
按 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%"
// ...
/>Playground
文本配置
默认情况下，仪表盘在弧形中心显示值。要修改它，请使用 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}`
}
/>Playground
弧形设计
要自定义仪表盘样式，请使用 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"
/>