如何計算條形圖的高度

Question

如何計算條形圖的高度，以便對於不同數量的酒吧，高圖總是對單個酒吧使用相同的高度。在沒有設置任何高度的情況下，對於較小的數字，條的大小將變大，並且對於較大數量的條變薄和丟失標籤。

Answer 1

您可以根據您的數據長度動態更改圖表的高度。

http://api.highcharts.com/highcharts#chart.height

chart: { 
    marginTop: 40, 
    marginBottom: 80, 
    height: data.length * 20 + 120 // 20px per data item plus top and bottom margins 
} 

的jsfiddle由托爾斯泰Hønsi提出： http://jsfiddle.net/highcharts/jMX8G/

類似主題： https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api/suggestions/3456724-size-height-of-bar-graph-based-on-contents-when-co

你還可以看到我寫的自定義功能。在它裏面，我遍歷所有的系列數據，並總結所有可見數據。然後我用我的列的寬度（通過函數參數傳遞），列的數量，marginBottom和plotTop設置圖表的高度。

在端

如果這個尺寸比圖的先前大小不同我設置圖表的新的大小與Chart.setSize（）：

http://api.highcharts.com/highcharts#Chart.setSize

例如：

http://jsfiddle.net/izothep/d3ezek8t/1/

Answer 2

我有一個類似的設置，我使用，我會張貼在這裏爲後人：

• http://jsfiddle.net/jlbriggs/kpu5d1qf/

使用一組變量來定義圖表/棒的大小參數，並從那裏起作用。

//count the data points 
var barCount  = chartData.length; 

//specify chart properties that will be used to calculate the total height 
var pointWidth = 20; 
var marginTop = 60; 
var marginRight = 10; 
var marginBottom = 50; 
var marginLeft = 100; 
var groupPadding = 0; 
var pointPadding = 0.3; 

var chartHeight = marginTop 
      + marginBottom 
      + ((pointWidth * barCount) * (1 + groupPadding + pointPadding)); 

而在圖表選項，例如：

 chart: { 
      type   : 'bar', 
      marginTop : marginTop, 
      marginRight : marginRight, 
      marginBottom : marginBottom, 
      marginLeft : marginLeft, 
      height  : chartHeight 
     }, 

所以，你可以編輯所有可能影響圖表的高度的圖表選項之外的屬性，並且所有的都佔了計算最終高度時。