如何從 Highcharts 的儀表圖中刪除邊距？

Question

我已經從 Highcharts 設置了一個solidgauge 圖表，我的問題似乎是當它被渲染時，圖表頂部有一個很大的空白區域。 我希望刪除它以允許我將其放置在 div 所在的中間。

請參閱顯示其當前呈現方式的照片：

請參閱下面重新創建的我的片段：

 var gaugeOptions = { chart: { type: 'solidgauge', animation: true, backgroundColor: 'transparent', }, title: null, pane: { center: ['50%', '85%'], size: '100%', startAngle: -90, endAngle: 90, background: { backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE', innerRadius: '60%', outerRadius: '100%', shape: 'arc' } }, tooltip: { enabled: false }, // the value axis yAxis: { plotBands: { from: 70, to: 71, color: '#DF5353', thickness: '45%', outerRadius: '105%' }, stops: [ [0.1, '#55BF3B'], // green [0.5, '#DDDF0D'], // yellow [0.9, '#DF5353'] // red ], lineWidth: 0, minorTickInterval: null, tickAmount: 2, title: { y: -70 }, labels: { y: 16 } }, plotOptions: { solidgauge: { dataLabels: { y: 5, borderWidth: 0, useHTML: true } } } }; // The speed gauge var chartSpeed = Highcharts.chart('plate-count-gauge-dry-side', Highcharts.merge(gaugeOptions, { yAxis: { min: 0, max: 100, title: { text: 'Speed' } }, credits: { enabled: false }, series: [{ name: 'Speed', data: [80], dataLabels: { format: '<div style="text-align:center"><span style="font-size:25px;color:' + ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' + '<span style="font-size:12px;color:silver">km/h</span></div>' }, tooltip: { valueSuffix: ' km/h' } }] })); // Bring life to the dials setInterval(function() { // Speed var point, newVal, inc; if (chartSpeed) { point = chartSpeed.series[0].points[0]; inc = Math.round((Math.random() - 0.5) * 100); newVal = point.y + inc; if (newVal < 0 || newVal > 100) { newVal = point.y - inc; } point.update(newVal); } }, 2000);

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/highcharts-more.js"></script> <script src="https://code.highcharts.com/modules/solid-gauge.js"></script> <div id="plate-count-gauge-dry-side" class="m-auto"></div>

Answer 1

這有點取決於您的用例，但問題的原因是窗格的定位。 特別是center屬性。 如果將其更改為center: ['50%', '50%']它將呈現在容器頂部。

Answer 2

這個尺寸是因為圖表是適應整個圓圈的，盡量使用center屬性來定位。

pane: {
  ...,
  center: ['50%', '100%']
},

plotOptions: {
  series: {
    ...,
    center: ['50%', '115%']
  },
  ...
}

演示： https://jsfiddle.net/BlackLabel/t0mb4xcz/