設置Highchart柱子最大寬度（ 讓 highcharts支持maxPointWidth屬性）

我們在設置圖表時候經常會動態設置數據列的寬度，但是如果數量較少的話,經常會比較難看，於是我們會想到限制一個最大寬度。這段代碼應該適合你。

 (function(H) { var each = H.each; H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function(proceed) { var series = this; if (series.data.length > 0) { var width = series.barW > series.options.maxPointWidth ? series.options.maxPointWidth : series.barW; each(this.data, function(point) { point.shapeArgs.x += (point.shapeArgs.width - width) / 2; point.shapeArgs.width = width; }); } proceed.call(this); }) })(Highcharts); 

添加完代碼后,在你的Highcharts屬性里增加這個,設置就可以完成對最大寬度的支持了。

 

series: [{
  // .... data: data['series']['stars'], tooltip: { valueSuffix: ' 顆' }, maxPointWidth: 30, // 最大寬度 采用svg寬度 }]

或者設置

   plotOptions: {

column: {
    cursor: 'pointer',
    pointPadding: 0.2,
    borderWidth: 0,
    //pointWidth: 30,
   maxPointWidth: 100 // 設置最大寬度

     }

        }