javascript - 仪表图，如何减小系列宽度？

Question

我尝试使用 Highcharts 创建仪表图表。我需要减小系列的宽度，但不幸的是我没有找到如何使用 highcharts 来实现这一点。

这是我想要的输出:

我制作了这个仪表:

Highcharts.chart('container', {

  chart: {
    type: 'solidgauge',
    height: '65%',
    plotBackgroundColor: null,
    plotBackgroundImage: null,
    plotBorderWidth: 0,
    plotShadow: false,
  },

  title: {
    text: '',
    style: {
      fontSize: '24px'
    }
  },

  tooltip: {
    borderWidth: 0,
    color: 'black',
    backgroundColor: 'none',
    shadow: false,
    style: {
      fontSize: '13px'
    },
    align: 'center',
    useHTML: true,
    pointFormat: '<div style="font-size:2em; font-weight: bold;">{point.y}%</div><br><div style="text-align: center;">{series.name}</div>',
    positioner: function(labelWidth) {
      return {
        x: (this.chart.chartWidth - labelWidth) / 2,
        y: (this.chart.plotHeight / 2) - 22
      };
    }
  },

  pane: {
    startAngle: 0,
    endAngle: 360,
    background: [{ 
      outerRadius: '87%',
      innerRadius: '63%',
      backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1])
        .setOpacity(0.3)
        .get(),
      borderWidth: 0
    }]
  },

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

  plotOptions: {
    solidgauge: {
      dataLabels: {
        enabled: false
      },
      rounded: true
    }
  },

  series: [{
    name: 'Label',
    data: [{
      color: 'orange',
      radius: '87%',
      innerRadius: '63%',
      y: 64
    }]
  }]
});

(function(H) {
  H.wrap(H.Tooltip.prototype, 'hide', () => {});
}(Highcharts));

var obj = document.getElementById('container')
var chart = Highcharts.charts[obj.getAttribute('data-highcharts-chart')];
var tooltipPoint = chart.series[0].points[0];
chart.tooltip.refresh(tooltipPoint);

#container {
  margin: 0 auto;
  max-width: 400px;
  min-width: 380px;
}

.highcharts-credits {
  display: none;
}

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

但是正如你所看到的，我的系列的宽度太大了。有办法减少这个宽度吗？

Answer 1

您可以通过增加pane.background.innerRadius和series.data.innerRadius来实现它。

代码:

  pane: {
    startAngle: 0,
    endAngle: 360,
    background: [{
      outerRadius: '87%',
      innerRadius: '80%',
      backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1])
        .setOpacity(0.3)
        .get(),
      borderWidth: 0
    }]
  }

  ...

  series: [{
    name: 'Label',
    data: [{
      color: 'orange',
      radius: '87%',
      innerRadius: '80%',
      y: 64
    }]
  }]

演示:

• https://jsfiddle.net/BlackLabel/wgomfLev/

API引用:

• https://api.highcharts.com/highcharts/pane.background.innerRadius

• https://api.highcharts.com/highcharts/series.solidgauge.data.innerRadius