javascript - Highcharts - 图例项目填充

Question

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

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

有人有什么想法吗？火狐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 属性:

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