Highcharts：根据容器内的元素调整 chart-container 的大小

Question

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

我的 Highcharts-code 可能看起来像这样（注意：此示例不需要实际数据）：

<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-container 的边框后面。容器似乎不关心图表本身以外的任何元素，如果未定义，chart.spacingBottom 默认为 15。

我想做的是根据字幕元素的渲染高度动态设置chart.spacingBottom(and/orchart.height)，但是由于某些原因，既不是纯JS或者 jQuery 似乎可以获取 highcharts-container 中任何元素的高度。

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

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

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

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

Answer 1

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

You should be able to use getBBox() method for preparing your chart: 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

Highcharts：根据容器内的元素调整 chart-container 的大小

Highcharts: Adjust size of chart-container based on elements within container

javascript

height

text

spacing

highcharts