如何在Highcharts柱形圖中減小具有固定條寬的條形之間的空間？

Question

我有一個固定寬度和固定條寬度的柱形圖。 當數據較少時，條之間的間距增加。 我想減少空間，我不介意條形圖從圖表的開頭或中間顯示，但是應該減少條形空間。 10px的空間看起來不錯。 任何幫助深表感謝。 這是一個演示 -

 Highcharts.chart('container', { chart: { type: 'column', width:1200 }, title: { text: 'Monthly Average Rainfall' }, subtitle: { text: 'Source: WorldClimate.com' }, xAxis: { categories: [ 'Jan', 'Feb' ], crosshair: true }, yAxis: { min: 0, title: { text: 'Rainfall (mm)' } }, tooltip: { headerFormat: '<span style="font-size:10px">{point.key}</span><table>', pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { column: { pointWidth:30 } }, series: [{ name: 'Tokyo', data: [49.9, 71.5] }] }); 

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/export-data.js"></script> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

Answer 1

我唯一能想到的就是添加一堆假柱來占用額外的空間。 Highcharts似乎不像這樣工作。 根據文檔，使用pointWidth或pointPadding ，取決於您提供的是哪一個，但不是兩者。

 Highcharts.chart('container', { chart: { type: 'column', width:1200 }, title: { text: 'Monthly Average Rainfall' }, subtitle: { text: 'Source: WorldClimate.com' }, xAxis: { categories: [ 'Jan', 'Feb', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '' ], crosshair: true }, yAxis: { min: 0, title: { text: 'Rainfall (mm)' } }, tooltip: { headerFormat: '<span style="font-size:10px">{point.key}</span><table>', pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { column: { pointWidth: 30, }, }, series: [{ name: 'Tokyo', data: [49.9, 71.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] }] }); 

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/export-data.js"></script> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>