问题:

How can I calculate the height of a bar chart so that for different number of bars, highcharts always use the same height for a single bar. Without setting any height the size of the bars are to large for a minor number and to thin and missing labels for larger number of bars.

回答1:

You can do it by dynamic change of height of your chart in dependence on your data length.

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 }

http://jsfiddle.net/highcharts/jMX8G/

You can also see custom function I wrote. Inside it I am iterating over all of my series data and making a sum of all visible data. Then I am setting the height of my chart with width of my column (passed in function parameter), number of columns, marginBottom and plotTop of my chart.

at the end if this size is different than previous size of chart I am setting new size of chart with Chart.setSize():

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

example:

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

回答2:

I have a similar set up that I use, I will post here for posterity:

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

Uses a set of variables to define the chart/bar sizing parameters, and works from there.

//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));

And in the chart options, for example:

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

So you can edit all of the properties that might affect the height of the chart outside of the chart options, and all are accounted for when calculating the final height.

转载请标明出处:How to calculate the height of bar chart

文章来源: How to calculate the height of bar chart

标签

bar

chart