Highcharts 样式、图例和自定义字体

Question

在将 自定义字体 应用于图例项时，我在设置 Highcharts 中的图例项时遇到问题。实际上项目彼此如此接近，itemMarginBottom 和 itemMarginTop 不起作用。

这是我的Highcharts 代码的一部分：

legend: {
    enabled: true,
    y: 20,
    align: 'right',
    verticalAlign: 'top',
    margin: 30,
    width: 200,
    borderWidth: 0,
    itemMarginTop: 15,
    itemMarginBottom: 15,
    itemStyle: {
            color: '#000',
            fontFamily: 'MuseoS500'
    }
},

这是传说中的截图：

我的丑陋解决方案：

我像下面这样解决了这个问题，但遗憾的是硬编码：

// it is for the text's in the legend, I'll start from 0 and will
// increase by 10, so it's adding 10 pixels extra space to the next one
var z = 0;    

// this is for tiny-lines near the texts in legend, they starts from 14
// and increasing by 14 also ...
var p = 14;

// loop through <text> tags, which are texts in the lgened
$('.highcharts-legend > text').each( function (i) {

    // they have 'x' and 'y' attribute, I need to work on 'y' obviously
    y = parseInt($(this).attr('y'));

    // increasing 'y' value ...
    $(this).attr('y', y + z);

    // next element is <path>, the colorful lines ...
    $(this).next().attr('transform', 'translate(30,' + p + ')');

    // increasing the values, for the next item in the loop ...
    z = z + 10;
    p = p + 10 + 14;

});

我知道这很愚蠢，但我无法以任何其他方式解决这个问题，我不得不让它们以某种方式工作。我也很乐意听到你的想法...... :)

补丁后的新传说：

Answer 1

Highchart documentation 表示有一个名为 lineHeight 的属性，但自 Highcharts 2.1 起已弃用

官方Highcharts forum的帖子也证实了这一点。因此，您可以破解源代码以根据需要更改高度，或者尝试在图表渲染后使用 javascript 更正项目高度。

此外，还有一个名为itemStyle 的属性允许为图例项设置 CSS。

例如paddingBottom: '10px'

查看示例：

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/legend/lineheight/