如何根据图表中条形的宽度Highcharts最大高度答案

【问题标题】：How to Highcharts max height based on width of bars in chart如何根据图表中条形的宽度Highcharts最大高度
【发布时间】：2019-01-02 12:29:36
【问题描述】：

寻找使用 highcharts 条形图设置图表高度属性的最佳方法。

目前我已将图表高度设置为等于 X 轴类别的数量，但不小于 400，使用：

this.resultsChartOptions.chart.height = ((categories.length * 50) > 400 ? categories.length * 50 : 400);

然而，这意味着条形之间存在重叠，尤其是在较大的图表上（因为图例和其他图表内容占据了我没有考虑的空间）。

我已将默认 pointWidth 设置为 50，这是最宽的条形 - 理想情况下，每个类别都只有 50 宽，并且图表会自动展开。

任何人对如何做到这一点有任何想法？

【问题讨论】：

标签： javascript charts highcharts

【解决方案1】：

在load 事件中，您可以在考虑图表的所有元素的情况下计算和设置所需的高度：

chart: {
    type: 'bar',
    height: 400,
    events: {
        load: function() {
            var categories = this.xAxis[0].tickPositions,
                plotHeight = categories.length * 50,
                chartHeight = plotHeight + (this.chartHeight - this.plotHeight);

            if (chartHeight > this.chartHeight) {
                this.setSize(null, chartHeight, false)
            }
        }
    }
}

现场演示：http://jsfiddle.net/BlackLabel/hkuLfogj/

API 参考：https://api.highcharts.com/class-reference/Highcharts.Chart#setSize

【讨论】：

这只是给我更多的错误？虽然我正在使用 vue 包装器来处理 highcharts，但这会有所不同吗？
您好 Adam Waring，此解决方案不会造成任何问题。或者，如果图表的其他元素具有固定高度，您可以在创建图表之前计算所需的空间：jsfiddle.net/BlackLabel/8epc6jL1
我无法在渲染之前计算图表大小，因为学生（xAxis）在图表之后加载 - 主要错误似乎是它无法识别图表高度和绘图高度
嗨 Adam Waring，请为我提供这个问题的最小实例。没有代码我帮不了你。