Highcharts：底部带有自定义marginBottom的图例

Question

当图例放置在图表下方时，通常会自动确定底部边距，以便一切都很合适。

但我有一个图表，其中包含一些自定义内容，因此我不得不覆盖marginBottom。当图例也位于图表下方时，这会自动计算。

我在this jsfiddle中做了一个简单的模型，您可以在其中启用/禁用图例并更改系列的数量，以查看事情看起来如何搞砸。

我猜我可能必须自己对marginBottom进行必要的调整才能说明这个传说，但是怎么做？

知道我怎么做这个吗？

编辑：我想我已经接近了...但我不确定我是否会以最好的方式去做...请参阅this jsfiddle。

Answer 1

我已经在考虑这个问题以及你已经更新的小提琴几周了，我想我已经解决了你的初始问题和我在评论中提出的反应性错误。

在chart选项中，我添加了一个加载事件，该事件在渲染时拉入系列，而不是在选项后使用的附加函数。我还删除了明确的marginBottom声明。

    chart: {
        type: 'line',
        borderWidth: 1,
        plotBorderWidth: 1,
        events: {
            load: function () {
            for (var i = 0; i < numberOfSeries; i++) this.addSeries(basicSeries);
          }
        }
    },

这样做是为了引入系列的数量（您在代码的顶部声明为静态变量）并在运行时添加它们。 Highcharts＆＃39;然后，代码会自动调整图表下方所需的空间，以适应图例及其项目的大小。

以下是您（更新后）对这些更改的更新版本：http://jsfiddle.net/brightmatrix/4fauh2bk/6/

旁注：图表的响应特性打破了chart.setSize()函数中的固定宽度值。似乎设置宽度auto或百分比（例如100%）将保持其调整大小的能力，但在执行该函数后可能需要重新绘制图表。