Question

我当前正在布置一个使用多个图表的页面，而且我似乎无法从Highcharts Solid Gauge中删除浪费的空间。我仅使用图表的50％（从-90到90范围），但窗格大小是绘制的圆弧的100％。如何减少浪费的空间？

当前

：

所需：

我正在使用以下容器：

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

这些是Solid Gauge参数：

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

Answer 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

Answer 2

用户ppotaczek提到了一种使用其他功能来调整图表大小的方法。这有助于我在向图表设置中添加高度时朝正确的方向看。这样可以根据需要调整图表的大小，而无需重画。

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

Highcharts固态压力表：清除窗格中的浪费空间

2 个答案: