高图，动态设置图例高度

Question

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

小提琴： https://jsfiddle.net/rredondo/awac1dw8/

请注意，随着容器变小，图表的绘图区也会变小，直到它消失，因为图例占用了空间。这是我想避免的行为。 另外，我尝试将maxHeight设置为某个数字。这种方法的问题在于它不是动态的，如果值太小，它会浪费大量空间。

图例选项包括：

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

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

Answer 1

这是一个在每次图表重绘时使用legend.update()的解决方案(它也在图表呈现后启动(： https://jsfiddle.net/kkulig/2s8dnk6f/

adjustLegendHeight函数将legend.maxHeight设置为图表高度的一半：

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

请注意，update函数在自身内部触发redraw。为了防止无限递归调用，我使用了控制绘制的全局变量：

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; 
}
}
}

let redrawingEnabled = true;
function adjustLegendHeight(chart) {
chart.legend.update({
maxHeight: chart.chartHeight / 2
});
}
var chart = Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
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; 
}
}
}
},
title: {
text: ''
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
}
}
},
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'vertical',
enabled: true
},
series: [{
name: 'Brands',
colorByPoint: true,
showInLegend: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}, {
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}, {
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
});
adjustLegendHeight(chart);

#container {
height: 100%;
width: 250px;
position: absolute;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

Answer 2

首先，你试过使用layout: 'horizontal'吗？它将图例中的项目列表分成几部分，显示非常整洁的分页，并驻留在相对较小的空间中。

如果没有，我相信要管理图表图例，除了挖掘 API 文档之外，您别无选择。如果您查看提供的 API 参考，则可以为图表定义很多选项。例如，legend.lineHeight或legend.margin以及其他有助于调整图例容器大小的功能。

还有一个方法legend.update()您可以在其中传递带有新选项的对象，以在需要时更新图例。

所以诀窍是跟踪容器/窗口的大小并使用所需的参数更新它。与使用 ChartJS 制作的图表在此处调整大小的方式类似