时间戳

首页 > 解决方案 > Highcharts 实心仪表未完全着色

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

问题描述

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

如果我更改容器大小，但图表会被剪裁。 在此处输入图像描述

如果我在图表上使用左右边距，则图表只是部分着色。 在此处输入图像描述

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

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'
        }
      }]
    });

标签： javascripthighcharts

解决方案

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

在附加代码中，窗格大小为 140%，将其更改为小于 100% 的值：

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

演示：

API参考：

推荐阅读