Highcharts，动态设置图例高度
我想要动态设置图例的高度，这样当容器调整大小时，图例高度将自动调整。理想情况下，图例的高度应该是图表容器高度的一半。
小提琴：https://jsfiddle.net/rredondo/awac1dw8/
请注意，随着容器变小，图表的绘图区域也会变小，直到它消失，因为图例占用了空间。这是我想要避免的行为。此外，我还尝试将maxHeight设置为某个数字。这种方法的问题是它不是动态的，如果值太小，它会浪费大量空间。
图例选项包括：
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'vertical',
enabled: true,
//maxHeight: 150
},布局必须设置为垂直，图例必须位于图表下方。
回答 2
Stack Overflow用户
发布于 2017-08-09 07:44:26
这里有一个解决方案，它在每次图表重绘时使用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。为了防止无限的递归调用，我使用了全局变量来控制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;
}
}
}
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>
Stack Overflow用户
发布于 2017-08-08 13:15:33
首先，你试过使用layout: 'horizontal'吗？它将图例中的项目列表拆分成多个部分，显示了相当整齐的分页，并且位于相对较小的空间中。
如果没有，我相信要管理图表图例，您除了深入到API文档之外别无选择。如果您查看提供的API reference，您可以在图表中定义大量选项。例如，legend.lineHeight或legend.margin等可以帮助调整图例容器大小的工具。
还有一个方法legend.update()，您可以在其中传递一个带有新选项的对象，以便在需要时更新图例。
因此，技巧是跟踪容器/窗口的大小，并使用所需的参数更新它。调整here大小的方法与使用ChartJS制作的图表类似
https://stackoverflow.com/questions/45568983
复制相似问题
腾讯云开发者
