代码之家 › 专栏 › 技术社区 › Adam Waring

如何根据图表中条形图的宽度设置最大高度

highcharts charts javascript

Adam Waring · 技术社区 · 6 年前

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

当前,我已将图表高度设置为等于X轴类别数,但不小于400,使用:

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

然而,这意味着在条形图之间存在重叠,特别是在较大的图表上(因为图例和其他图表占据了我没有考虑的空间)。

我已经将默认的pointwidth设置为50,这是最宽的条-理想情况下,每个类别都只有50宽,图表将自动展开。

有人知道怎么做吗?

1 回复 | 直到 6 年前

ppotaczek 6 年前

在 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