Question

如何计算条形图的高度，以便对于不同数量的条形图，highcharts始终对单个条形使用相同的高度。在没有设置任何高度的情况下，条形图的大小对于较小的数字来说是大的，对于较大数量的条形图而言是较薄且缺少标签。

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
}

由TorsteinHønsi制作的jsFiddle： 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
        },

因此，您可以编辑可能影响图表选项之外的图表高度的所有属性，并在计算最终高度时考虑所有这些属性。

如何计算条形图的高度

2 个答案: