Javascript Highcharts，动态设置图例高度

我想动态设置图例的高度，因此当容器调整大小时，图例高度将自动调整。 理想情况下，图例的高度应为图表容器高度的一半

小提琴：

请注意，随着容器变小，图表的绘图区域也会变小，直到它消失，因为图例占用了空间。这是我想要避免的行为。 此外，我还尝试将

maxHeight

设置为某个数字。这种方法的问题是它不是动态的，如果值太小，它会浪费大量空间

图例选项包括：

legend: {
       align: 'center',
       verticalAlign: 'bottom',
       layout: 'vertical',
       enabled: true,
       //maxHeight: 150
},

---

布局必须设置为垂直，图例必须位于图表下方。

首先，您是否尝试使用

布局：“水平”

？它将图例中的项目列表拆分为多个部分，显示了非常整洁的分页，并且驻留在相对较小的空间中

如果没有，我相信要管理图表图例，除了深入挖掘API文档之外，您别无选择。如果您查看图表，您可以在图表中定义大量选项。例如

legend.lineHeight

或

legend.margin

以及其他有助于调整图例容器大小的工具

还有一个方法

legend.update（）

，您可以通过该方法传递具有新选项的对象，以便在需要时更新图例

---

因此，诀窍是跟踪容器/窗口的大小，并使用所需的参数进行更新。与使用ChartJS制作的图表调整大小的方式类似，这里有一个解决方案，它在每次重新绘制图表时使用

legend.update（）

（也在图表呈现后启动）：

adjustLegendHeight

功能将

legend.maxHeight

设置为图表高度的一半：

function adjustLegendHeight(chart) {
  console.log(chart);
  chart.legend.update({
     maxHeight: chart.chartHeight / 2
  });
}

请注意，

update

函数在自身内部激发

redraw

。为了防止无限递归调用，我使用了控制radrawing的全局变量：

events: {
  redraw: function() {
    if (redrawingEnabled) {
        // disable redrawing to prevent infinite recursive redraw() loop (update() fires redraw by default)
      redrawingEnabled = false; 

      adjustLegendHeight(this);

      // enable redrawing after update and redraw are finished
      redrawingEnabled = true; 
    }
  }
}

让redrawingEnabled=true；
功能调整LegendHeight（图表）{
chart.legend.update({
maxHeight:chart.chartHeight/2
});
}
var chart=Highcharts.chart（'容器'{
图表：{
plotBackgroundColor:null，
plotBorderWidth:null，
影子：错，
键入“pie”，
活动：{
重画：函数（）{
如果（已重新绘制）{
//禁用重画以防止无限递归重画（）循环（默认情况下更新（）触发重画）
重画功能=假；
调整LegendHeight（此）；
//更新和重画完成后启用重画
重画功能=真；
}
}
}
},
标题：{
文本：“”
},
打印选项：{
馅饼：{
allowPointSelect:true，
光标：“指针”，
数据标签：{
已启用：false
}
}
},
图例：{
对齐：'居中'，
垂直排列：“底部”，
布局：“垂直”，
已启用：true
},
系列：[{
名称：'品牌'，
colorByPoint：对，
showInLegend：是的，
数据：[{
名称：“Microsoft Internet Explorer”，
y:56.33
}, {
名称：“Chrome”，
y:24.03，
切碎：是的，
所选：真
}, {
名称：“Firefox”，
y:10.38
}, {
名称：“Safari”，
y:4.77
}, {
名字：'歌剧'，
y:0.91
}, {
名称：“专有或不可检测”，
y:0.2
}, {
名称：“Microsoft Internet Explorer”，
y:56.33
}, {
名称：“Chrome”，
y:24.03，
切碎：是的，
所选：真
}, {
名称：“Firefox”，
y:10.38
}, {
名称：“Safari”，
y:4.77
}, {
名字：'歌剧'，
y:0.91
}, {
名称：“专有或不可检测”，
y:0.2
}, {
名称：“Microsoft Internet Explorer”，
y:56.33
}, {
名称：“Chrome”，
y:24.03，
切碎：是的，
所选：真
}, {
名称：“Firefox”，
y:10.38
}, {
名称：“Safari”，
y:4.77
}, {
名字：'歌剧'，
y:0.91
}, {
名称：“专有或不可检测”，
y:0.2
}]
}]
});
调整LegendHeight（图表）
#容器{
身高：100%；
宽度：250px；
位置：绝对位置；
}

下面是一个JSFIDLE，它使用legend.update（）解决了这个特殊问题：为什么不发布另一个答案？看起来它更符合OP的需要