具有固定条宽和间隙的Highcharts条形图

Question

我已经设置了

pointWidth: 20,
pointPadding: 0,
groupPadding: 0

但图表仍然会扩展以填充默认图表高度。是否可以让Highcharts调整图表高度？

http://jsfiddle.net/MLELM/

Answer 1

图表将根据您提供的内容填充可用高度。 点和组填充是可用空间的一部分，因此图表 表示符合指定的属性。

它使用包含元素的大小来确定其大小，因此它不可能忽略包含元素的高度。

如果您想要一个较小的图表填充页面上较大的空间，可以将包含的元素放在另一个包装元素中。然后，您可以根据系列的数量自己计算图表的高度，并将该高度传递给容器。

如果您希望将指定的系列聚集在顶部附近，则需要添加其他空数据点以填充它们下方的空间。

如果您可以更具体地了解自己想要什么以及为什么，可以提供更好的答案。

[[更新

再次偶然发现这篇文章，并记得我有一个演示，它根据一些预定义的参数和数据点的数量自动设置图表高度。

var barCount = chartData.length,
    pointWidth = 20,
    marginTop = 70,
    marginRight = 10,
    marginBottom = 50,
    marginLeft = 100,
    groupPadding = 0,
    pointPadding = 0.3,
    chartHeight = marginTop 
                + marginBottom 
                + ((pointWidth * barCount) 
                * (1 + groupPadding + pointPadding));

小提琴：

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

相关问题：

• How to calculate the height of bar chart

Answer 2

是的，您可以设置图表高度：

    chart: {
        type: 'bar',
        height: 200,
    },

另见http://jsfiddle.net/MLELM/3/