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

【问题标题】：Highcharts Solid Gauge: Remove Wasted Space in PaneHighcharts Solid Gauge：删除窗格中的浪费空间
【发布时间】：2018-07-29 00:09:02
【问题描述】：

我目前正在布置一个使用多个图表的页面，但我似乎无法从 Highcharts Solid Gauge 中删除浪费的空间。我只使用了从 -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/>'
        }
    }]
});

【问题讨论】：

Highcharts 使用容器的高度，除非您指定 height - Fiddle

标签： highcharts

【解决方案1】：

正如上面评论中提到的，您应该为图表使用 height 选项。此外，您还可以使用 center 和 size 属性来优化图表占用的空间。

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

现场演示：http://jsfiddle.net/BlackLabel/eo47dyam/

API 参考：https://api.highcharts.com/highcharts/pane.center

【讨论】：

我已经完成了这些设置，我可以在 PC/浏览器上操作图表以使其看起来正确，但是当它传输到移动设备时，它不会以令人愉快的方式缩放。也许这比与 Highcharts 更相关。
您好 kinser86，我认为在这种情况下，问题与 Highcharts 有关。可以尝试改变图表的高度，取决于plotSizeX，例如：jsfiddle.net/BlackLabel/qfk3ouap
我采纳了您的建议并删除了该功能以简单地更改大小，它可以按我的意愿工作。

【解决方案2】：

用户 ppotaczek 提到了一种使用另一个函数调整图表大小的方法。这帮助我在向图表设置中添加高度时找到了正确的方向。这会根据我的需要和不需要重绘来调整图表的大小。

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

【讨论】：