更改高图中的图例大小？

Question

有谁知道在高图中更改图例大小的好方法？这是一个小提琴，其中设置了图例的宽度和 itemWidth 属性。我在论坛中找到了这个解决方案，这个解决方案适用于图表。示例： Highcharts set legend height

但我找不到为地图制作的好方法。

http://jsfiddle.net/meo67rhf/

legend: {
    width: 200,
    itemWidth: 200
}

我也尝试过使用 DOM 方法设置宽度：

即document.getElementsByClassName("highcharts-legend").style.width = "200px";

这两个都不适合我。我只是想修改图例的高度和宽度。任何帮助表示赞赏。

Answer 1

你在这个正确的轨道上。

是的，Highmaps 也可以调整图例的大小。我不确定您要做什么，但高度是由内部包含的元素数量自动定义的。您可以通过更改 width、itemWidth 和 layout 的值来解决此问题。

在您的示例小提琴中，如果您更改上述值，您将获得不同的布局。看看当你将它们转移到时会发生什么：

width: 300,
itemWidth: 100,
layout: 'horizontal',

你会得到以下结果：

白框采用定义的 width 为 300。将 itemWidth 设置为 100 意味着各个图例项将采用定义的总宽度的 1/3（只是不要使用百分比；那不会不行）。

您还可以做的另一件事是让这些值成为容器元素的百分比。如果您在样式表声明中定义了容器的宽度和/或高度，则可以设置 JavaScript 变量以在运行时捕获这些值并相应地调整您的图例。

例如：

// in your inline stylesheet
#container: { width: '650px', height: '450px' }

// variables defined before your chart options
var chartHeight = $('#container').height();
var chartWidth = $('#container').width();

// in your legend
width: chartWidth * 0.3, // 30% of total width
itemWidth: chartWidth * 0.1, // 10% of total width

将layout 设置为'horizontal' 将为您提供比使用值vertical 时更短的图例。

我希望所有这些对您有所帮助。