如何去除Gauge.js仪表盘左右两侧的多余空白？

针对你使用Gauge.js时仪表盘左右存在多余空白的问题，可以通过以下几个特定配置调整解决（无需更换库）：

• 修正margin配置格式：Gauge.js的margin仅支持单个数值（统一设置四边空白），数组格式不生效。将原配置中的margin: [0, 0, 0, 0]改为margin: 0，直接移除默认空白。
• 增大radiusScale填充画布：当前radiusScale: 0.9会让仪表盘缩小，预留出空白。将其调整为1.0，让仪表盘尽可能填充canvas区域（数值不超过1即可避免内容溢出）。
• 调整静态标签位置：如果staticLabels的布局挤压了图表空间，可添加offset属性（如offset: -10），让标签更贴近仪表盘，减少额外空白占用。
• 匹配canvas与容器尺寸：原canvas宽度设为400px，但容器有m-w-324类（推测是最大宽度324px），导致canvas被截断后出现视觉空白。将canvas宽度调整为与容器一致（324px），或移除容器的max-width限制（根据布局需求）。

修改后的完整代码示例 #

HTML部分：

<div class="box-tile statitics m-w-324">
  <canvas style="height: 200px;width: 324px;" id="dhuGauge"></canvas>
  <span class="label">EFF. 
    <span class="value">
      <span id="efficiency" class="loading">...</span>
    </span>
  </span>
</div>

JavaScript部分：

var dhuGaugeOpts = {
    angle: -0.10,
    lineWidth: 0.2,
    radiusScale: 1.0,
    pointer: {
        length: 0.5,
        strokeWidth: 0.05,
        color: '#fff'
    },
    staticLabels: {
        font: "10px sans-serif",
        color: '#fff',
        labels: [2, 5],
        fractionDigits: 0,
        offset: -10
    },
    staticZones: [
        { strokeStyle: "#30B32D", min: 0, max: 2 },
        { strokeStyle: "#FFDD00", min: 2, max: 5 },
        { strokeStyle: "#F44336", min: 5, max: 10 },
    ],
    limitMax: false,
    limitMin: false,
    highDpiSupport: true,
    plotBackgroundColor: null,
    plotBackgroundImage: null,
    plotBorderWidth: 0,
    plotShadow: false,
    margin: 0
};
dhuGauge = new Gauge(document.getElementById('dhuGauge')).setOptions(dhuGaugeOpts);
dhuGauge.maxValue = 10;
dhuGauge.setMinValue(0);

内容的提问来源于stack exchange，提问作者ANEESH S