更改高图中的图例大小？

Question

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

但是我找不到一个很好的方法来为地图做这件事。

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更短的图例。

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