在highmaps中更改图例大小？

Question

有没有人知道在highmaps中更改图例大小的好方法？这是一个小提琴，其中设置了图例的width和itemWidth属性。我发现这个解决方案搜索论坛，这个解决方案适用于图表。 〔实施例： Highcharts set legend height

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

http://jsfiddle.net/meo67rhf/

legend: {
    width: 200,
    itemWidth: 200
}

我也尝试过使用DOM方法：

即。 document.getElementsByClassName（＆＃34; highcharts-legend＆＃34;）。style.width =＆＃34; 200px＆＃34 ;;

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

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

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