Highcharts 如何计算条形图的高度

如何计算条形图的高度，以便对于不同数量的条形图，highcharts始终对单个条形图使用相同的高度。在不设置任何高度的情况下，对于较小的数字，条形图的大小过大；对于较大的数字，条形图的标签过薄或缺失。

您可以根据数据长度动态更改图表的高度

Torstein Hønsi制作的JShiddle：

类似主题：

您还可以看到我编写的自定义函数。在它里面，我迭代我的所有系列数据，并对所有可见数据求和。然后我用我的列宽（传入函数参数）、列数、边距底部和图表顶部设置图表的高度

最后，如果此大小与以前的图表大小不同，我将使用chart.setSize（）设置图表的新大小：

例如：

---

您可以根据数据长度动态更改图表的高度

Torstein Hønsi制作的JShiddle：

类似主题：

您还可以看到我编写的自定义函数。在它里面，我迭代我的所有系列数据，并对所有可见数据求和。然后我用我的列宽（传入函数参数）、列数、边距底部和图表顶部设置图表的高度

最后，如果此大小与以前的图表大小不同，我将使用chart.setSize（）设置图表的新大小：

例如：

---

我有一个类似的设置，我将在这里为后代发布：

使用一组变量定义图表/条形图尺寸参数，并从中开始工作

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

---

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

我有一个类似的设置，我将在这里为后代发布：

使用一组变量定义图表/条形图尺寸参数，并从中开始工作

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

---

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

您可以指定您的问题吗？是否希望每个条形图的高度都相同，而与其值无关？我讨论的是水平条形图，因此条形图的高度与系列值无关。能否具体说明您的问题？你想让每个条都有相同的高度，独立于它的值吗？我说的是水平条形图，所以条的高度与系列的值无关。好的，我希望有一个更简单的解决方案，因为在添加图例和多个分类时，这会变得非常复杂，我希望有一个更简单的解决方案，因为在添加图例和多个类别时，这会变得非常复杂