如何计算条形图的高度 [英] How to calculate the height of bar chart

问题描述

如何计算条形图的高度，以便对于不同数量的酒吧，高图总是对单个酒吧使用相同的高度。如果没有设置任何高度，条形的大小对于较小的数字来说很大，而对于较大数量的条形则会减少并丢失标签。 解决方案

您可以根据您的数据长度动态更改图表高度。 com / highcharts＃chart.heightrel =nofollow> http://api.highcharts.com/highcharts#chart.height

 图表：{
 marginTop：40，
 marginBottom：80，
 height：data.length * 20 + 120 //每个数据项加上20px加上顶部和底部边距
} 
  

jsFiddle由TorsteinHønsi制作：
http://jsfiddle.net/highcharts/jMX8G/

类似主题：
htt PS：//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/

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.

解决方案

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
}

jsFiddle made by Torstein Hønsi: http://jsfiddle.net/highcharts/jMX8G/

Similar Topic: https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api/suggestions/3456724-size-height-of-bar-graph-based-on-contents-when-co

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/

这篇关于如何计算条形图的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！