能否为Highcharts的solidgauge设置dashstyle实现虚线边框？

AI 小北

2026-7-4

Highcharts Solidgauge 虚线边框实现方案

Solidgauge 图表没有饼图那样的graph属性，所以你之前尝试的this.series[0].graph.attr({dashstyle: "LongDash"})肯定无效。正确的做法是通过pane.background配置项来设置虚线边框，因为背景元素支持边框样式的自定义。

关键修改点

在pane.background的配置对象中，添加borderDashstyle属性指定虚线样式（可选值：'LongDash'、'Dash'、'Dot'等）
显式设置borderColor，避免边框颜色和背景色一致导致不可见
移除无效的load事件操作代码

完整示例代码

JavaScript 代码

Highcharts.chart('container', {
  chart: {
    type: 'solidgauge'
  },

  pane: {
    startAngle: -90,
    endAngle: 90,
    background: [{
      outerRadius: '90%',
      innerRadius: '60%',
      backgroundColor: "white",
      borderWidth: 1,
      borderColor: '#333', // 显式设置边框颜色
      borderDashstyle: 'LongDash', // 设置虚线样式
      shape: "arc"
    }]
  },

  yAxis: {
    min: 0,
    max: 100,
    lineWidth: 0,
    tickPositions: []
  },

  plotOptions: {
    solidgauge: {
      dataLabels: {
        enabled: false
      },
      stickyTracking: false
    }
  },

  series: [{
    data: [{
      radius: '90%',
      innerRadius: '60%',
      y: 0
    }]
  }]
});

HTML 代码

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
  <div id="container"></div>
</figure>