如何计算条形图的高度

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 
     }, 

所以，你可以编辑所有可能影响图表的高度的图表选项之外的属性，并且所有的都占了计算最终高度时。