javascript - Highcharts 实心仪表未完全着色

Question

我正在尝试创建一个实体图表，其中容器对于默认图表大小来说太小。

如果我更改容器大小，但图表会被剪切。

如果我在图表上使用左右边距，则图表仅部分着色。

有人知道如何让整个图表着色吗？

this.chart = Highcharts.chart('container', {

      title: null,

      chart: {
        // marginLeft: 50,
        // marginRight: 50,
      },

      plotOptions: {
        solidgauge: {
          dataLabels: {
            y: 5,
            borderWidth: 0,
            useHTML: true
          }
        }
      },

      pane: {
        center: ['50%', '85%'],
        size: '140%',
        startAngle: -90,
        endAngle: 90,
        background: {
          backgroundColor: '#EEE',
          innerRadius: '60%',
          outerRadius: '100%',
          shape: 'arc'
        }
      },

      yAxis: {
        min: 0,
        max: 100,
        stops: [[0, 'rgba(50,157,255,0.4)']]
      },
      series: [{
        name: 'RPM',
        type: 'solidgauge',
        dataLabels: {
          format: '<div style="text-align:center"><span style="font-size:19px;color:' +
            ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f} %</span><br/>' +
            '<span style="font-size:10px;color:silver">* test</span></div>'
        },
        tooltip: {
          valueSuffix: ' percent of bought power'
        }
      }]
    });

Answer 1

您可以通过设置较小的pane.size来实现它。

在所附代码中， Pane 大小为140%，将其更改为小于100%的值:

  pane: {
    center: ['50%', '85%'],
    size: '90%',
    startAngle: -90,
    endAngle: 90,
    background: {
      backgroundColor: '#EEE',
      innerRadius: '60%',
      outerRadius: '100%',
      shape: 'arc'
    }
  }

演示:

• https://jsfiddle.net/BlackLabel/w689fp4c/1/

API引用:

• https://api.highcharts.com/highcharts/pane.size