是否可以将dashstyle设置为solidgauge highchart？

Question

我想将边框设为虚线，但饼图的解决方案不起作用。

由于某种原因，实心图表的图形属性未定义。可能是虚线样式可以通过 pane.background 属性以某种方式设置。

https://jsfiddle.net/om2enjkq/27/

Highcharts.chart('container', {
  chart: {
    type: 'solidgauge',
    events: {
      load: function() {
        this.series[0].graph.attr({
          dashstyle: "LongDash"
        });
      },
    },
  },

  pane: {
    startAngle: -90,
    endAngle: 90,
    background: [{
      outerRadius: '90%',
      innerRadius: '60%',
      backgroundColor: "white",
      borderWidth: 1,
      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
    }],
  }]
});

<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>

Answer 1

在这种情况下，您可以抓取窗格元素并向其添加

stroke-dasharray

属性：

Highcharts.chart('container', {
  chart: {
    type: 'solidgauge',
    events: {
      load: function() {
        this.pane[0].group.attr({
         "stroke-dasharray": "15"
        });
      },
    },
  },
  pane: {
    startAngle: -90,
    endAngle: 90,
    background: [{
      outerRadius: '90%',
      innerRadius: '60%',
      backgroundColor: "white",
      borderWidth: 1,
      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
    }],
  }]
});

<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>

<div id="container"></div>

演示：https://jsfiddle.net/BlackLabel/s52fguka/