Highcharts Solid Gauge：删除窗格中浪费的空间

我目前正在布置一个使用多个图表的页面，我似乎无法从Highcharts固体仪表中删除浪费的空间。我只使用了从-90到90的图表的50%，而窗格大小是绘制的弧的100%。我怎样才能重新利用浪费的空间

当前：

所需：

我正在使用以下容器：

<div id="container-ping" style="height: 20vh; width: 33.33%; float: left"></div>

以下是固体仪表参数：

// Create the ping chart
$('#container-ping').highcharts({
    chart: {
        type: 'solidgauge'
    },
    tooltip: {
        enabled: false
    },
    yAxis: {
        min: 0,
        max: 500,
        stops: [
            [0.1, '#55BF3B'], // green
            [0.5, '#DDDF0D'], // yellow
            [0.9, '#DF5353'] // red
        ],
        lineWidth: null,
        tickLength: 0,
        tickPositions: [0, 500],
        minorTickLength: 0,
        minorTickInterval: null,
        tickAmount: 2,
        title: {
            y: 0
        },
        labels: {
            enabled: true,
            distance: 15,
            align: 'center'
        }
    },
    plotOptions: {
        solidgauge: {
            dataLabels: {
                y: 0,
                borderWidth: 0,
                useHTML: true
            }
        }
    },
    pane: {
        center: ['50%', '50%'],
        size: '100%',
        startAngle: -90,
        endAngle: 90,
        background: {
            backgroundColor: 'none',
            borderColor: '#aaa',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },
    credits: {
        enabled: false
    },
    title: {
        text: processedData[0]['name']
    },
    series: [{
        data: [processedData[0]['data'][0]],
        dataLabels: {
            format: '<div style="text-align:center"><span style="font-size:12px;color:' +
                ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>'
        }
    }]
});

//创建ping图表
$（“#容器ping”）。高图({
图表：{
类型：“solidgauge”
},
工具提示：{
已启用：false
},
亚克斯：{
分:0,，
最高：500，
停止：[
[0.1，#55BF3B']，//绿色
[0.5，#DDDF0D']，//黄色
[0.9，#DF5353']//红色
],
线宽：空，
长度：0，
位置：[0，500]，
minorTickLength:0，
minorTickInterval:null，
金额：2，
标题：{
y:0
},
标签：{
启用：对，
距离：15，
对齐：“居中”
}
},
打印选项：{
solidgauge：{
数据标签：{
y:0，
边框宽度：0，
useHTML:true
}
}
},
窗格：{
中心：['50%，'50%']，
大小：“100%”，
startAngle:-90，
端角：90，
背景：{
背景颜色：“无”，
边框颜色：“#aaa”，
内半径：“60%”，
外层：“100%”，
形状：“圆弧”
}
},
学分：{
已启用：false
},
标题：{
文本：processedData[0]['name']
},
系列：[{
数据：[已处理数据[0]['data'][0]]，
数据标签：{
格式：“{y}
”
}
}]
});

如上所述，您应该为图表使用高度选项。此外，您还可以使用居中和大小属性优化图表占用的空间

pane: {
    center: ['50%', '85%'],
    size: '140%',
    startAngle: -90,
    endAngle: 90
}

现场演示：

---

API参考资料：

用户ppotaczek提到了一种使用另一个函数调整图表大小的方法。这帮助我在将高度添加到图表设置时朝着正确的方向看。这样可以调整图表的大小，而不需要重新绘制

      chart: {
        type: 'solidgauge',
        height: (70) + '%',
      },

---

Highcharts使用容器的高度，除非您指定-我已经完成了这些设置，我可以在PC/浏览器上操作图表使其看起来正确，但当它传输到移动设备时，它的缩放方式并不令人愉快。也许这比Highcharts更与HTML相关。Hi kinser86，我认为在这种情况下，问题与Highcharts相关。您可以尝试更改图表的高度，具体取决于plotSizeX，例如：我采纳了您的建议，删除了函数，只需更改大小，它就可以按照我的要求工作。