如何在MUI X Charts中添加水平仪表盘图表？

问题原因 #

MUI X默认的Gauge组件基于圆形弧（SVG path）实现，仅修改startAngle或endAngle只能调整圆弧的角度范围，无法将其转换为纯水平的条形样式。

方案1：用Gauge组件实现水平圆弧仪表盘 #

如果你的需求是水平方向的圆弧仪表盘（类似扁平半圆），可以通过设置角度范围为180°（左到右），配合调整半径参数实现：

import { Gauge, GaugeArc, GaugeValue } from '@mui/x-charts/Gauge';

export default function HorizontalArcGauge() {
  return (
    <Gauge
      width={400}
      height={150}
      value={75}
      // 设置角度从左侧(180°)到右侧(0°)
      startAngle={180}
      endAngle={0}
      // 调整内外半径，让圆弧更扁平
      radius={60}
      innerRadius={50}
    >
      <GaugeArc />
      <GaugeValue valueFontSize={24} valueLabel="75%" />
    </Gauge>
  );
}

方案2：用BarChart模拟水平条形仪表盘 #

如果需要完全贴合你提供的水平条形仪表盘示例，推荐使用BarChart自定义样式，它天然支持水平布局，更易实现矩形条形效果：

import { BarChart, Bar, XAxis, Tooltip } from '@mui/x-charts';

// 仪表盘数据，value为当前进度（0-100）
const gaugeData = [{ value: 75 }];

export default function HorizontalBarGauge() {
  return (
    <BarChart
      width={450}
      height={120}
      series={[
        {
          data: gaugeData,
          type: 'bar',
          barThickness: 35,
          color: '#1976d2'
        }
      ]}
      // 设置X轴范围为0-100，匹配仪表盘刻度
      xAxis={[
        {
          min: 0,
          max: 100,
          tickInterval: 20,
          label: '进度'
        }
      ]}
      // 启用水平布局
      layout="horizontal"
      sx={{
        // 自定义条形样式，添加圆角
        '& .MuiBarElement-root': {
          borderRadius: '8px'
        },
        // 调整轴的位置，优化视觉效果
        '& .MuiXAxis-root': {
          marginTop: 3
        }
      }}
    >
      <Tooltip />
    </BarChart>
  );
}

关键说明 #

• 默认Gauge组件的核心是圆形弧，无法直接生成矩形条形，若需矩形样式，优先选择BarChart方案。
• 若坚持使用Gauge，可通过自定义GaugeArc的path属性，手动绘制水平矩形路径，但复杂度较高，不推荐。

内容的提问来源于stack exchange，提问作者Maina Mwangi