Highcharts - 传奇项目填充

Question

在Highcharts中标签项的文本填充似乎有问题。与Chrome相比，我在Firefox中获得了非常不同的结果：http://jsfiddle.net/moppa/cMXyG/18/

如果我检查浏览器中的元素， tspan 标记在Chrome中的高度为16px，但为20px。在FF中，它看起来像是一些像素被添加为填充，因为文本没有填满整个标记。我已经尝试了legend.itemStyle的行高和字体大小设置，但没有运气。

有没有人有任何想法？ Firefox 25.0.1和Chrome 31.0.1650.57m

附加代码以符合JSFiddle限制：

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    legend: {
        layout: 'vertical',
        itemMarginTop: 0,
        itemMarginBottom: 0,
        align: 'right',
        verticalAlign: 'middle',
        padding:0
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]},
    {
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]},
    {
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]},
    {
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]},
    {
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]},
    {
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]}]

});

Answer 1

尝试使用 itemMarginBottom perperty，如下所示：

legend: {
    layout: 'vertical',
    itemMarginBottom:7,
    align: 'right',
    verticalAlign: 'top',
    itemStyle: {
        font: '9pt Raleway,Helvetica,sans-serif',
        color: '#A0A0A0'
    },
    itemHoverStyle: {
        color: '#FFF'
    },
    itemHiddenStyle: {
        color: '#444'
    }
}

Answer 2

您可以查看主版本吗？这一个示例：http://jsfiddle.net/cMXyG/19/ .

对我来说看起来不错，请看：

• FF：

• 铬：

可能由lineWidth的不同计算引起的差异很小（~1px）。