Highcharts：根据容器内的元素调整图表容器的大小答案

【问题标题】：Highcharts: Adjust size of chart-container based on elements within containerHighcharts：根据容器内的元素调整图表容器的大小
【发布时间】：2018-05-24 22:16:39
【问题描述】：

生成 Highcharts 时，我希望在 highcharts-container 中包含一串文本，以便将文本包含在可下载的图像中。问题是，文本的数量可能会改变（而不是我自己），这意味着我为文本保留的空间将来可能会太小或太大。我的愿望是不必在每次更改文本时手动检查图表的属性是否必须更新。

我的 Highcharts 代码可能如下所示（注意：此示例不需要实际数据）：

<script type="text/javascript">
var chart = new Highcharts.chart({
    chart: {
        type: 'spline',
        width: 600,
        spacingBottom: 100,
        renderTo: 'chart-container'
    },
    title: {
        text: 'Total number of something from 2000-2010',
        align: 'left'
    },
    subtitle: {
        text: 'Source: Some Source Inc.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
        align: 'left',
        verticalAlign: 'bottom'
    },
    legend: {
        enabled: false
    }
})
</script>
<style>
.highcharts-container {
    border: 2px solid #CCC;
    padding: 10px;
}
text { font-family: Helvetica; }
</style>

在此示例中，我将 subtitle-element 设置为我的附加文本并将 chart.spacingBottom 设置为 100，这为字幕中的文本量提供了舒适的间距。但是，如果文本量增加，使得字幕元素的高度大于 SpacingBottom，则尾随文本将简单地消失在图表容器的边框后面。容器似乎不关心图表本身以外的任何元素，如果未定义，chart.spacingBottom 默认为 15。

我想要做的是根据字幕元素的渲染高度以某种方式动态设置chart.spacingBottom（和/或chart.height），但由于某种原因，纯JS或jQuery似乎都无法获得highcharts-container 中任何元素的高度。

console.log(document.getElementsByClassName("highcharts-subtitle").offsetHeight); 返回未定义

$(".highcharts-subtitle").height(); 返回整数 0。

我还尝试通过使用chart.renderer.text 和chart.renderer.label 来包含文本，而不是仅仅劫持字幕元素。从这些元素中的任何一个获取高度都会产生相同的结果，我最终想要使用字幕只是因为正确放置位置不那么麻烦。不过，我愿意接受建议。

我忽略的任何提示或方法应该允许我动态更改图表的属性？

【问题讨论】：

你应该可以使用 getBBox() 方法来准备你的图表：jsfiddle.net/BlackLabel/oteewvss/4
非常有用。 :) 如果我选择通过渲染器而不是字幕元素添加文本，我可以类似地使用 getBBox() 来访问渲染器创建的元素的属性吗？

标签： javascript text highcharts height spacing

【解决方案1】：

使用 getBBox() 是这个问题的答案，正如 cmets 中所建议的那样。

您应该能够使用 getBBox() 方法来准备图表：jsfiddle.net/BlackLabel/oteewvss/4 – Grzegorz Blachliński

事件中的另一个例子：

var chart = new Highcharts.chart({
    chart: {
        type: 'spline',
        width: 600,
        renderTo: 'chart-container',
        events: {
            load: function() {
                this.update({
                    chart: {
                        spacingBottom: this.subtitle.element.getBBox().height
                    }
                });
            }
        }
    },
    title: {
        text: 'Total number of something from 2000-2010',
        align: 'left'
    },
    subtitle: {
        text: 'Source: Some Source Inc.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
        align: 'left',
        verticalAlign: 'bottom'
    }
});

其他一些可以通过图表元素获取的有用元素：

x 轴标签的高度：chart.xAxis[0].labelGroup.element.getBBox().height
图例高度：chart.legend.legendHeight

【讨论】：