Question

生成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>

在这个例子中，我已经将字幕元素作为我的附加文本的主页，并将chart.spacingBottom设置为100，这使得字幕中的文本量具有舒适的间距。但是，如果文本量增加，使得字幕元素的高度大于spacingBottom，则尾随文本将简单地消失在图表容器的边框后面。除了图表本身之外，容器似乎不关心任何元素，如果没有定义，chart.spacingBottom默认为15。

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

console.log(document.getElementsByClassName("highcharts-subtitle").offsetHeight);返回undefined

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

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

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

Answer 1

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

您应该可以使用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

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

1 个答案: