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

在将自定义字体应用于图例项时，我对Highcharts中的图例项的样式设置有问题。事实上，项目彼此非常接近，itemMarginBottom和itemMarginTop不起作用

以下是我的Highcharts代码的一部分：

下面是传奇人物的截图：

我丑陋的解决方案：

我解决了这个问题，如下所示，但不幸的是硬编码：

// 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;

});

我知道这很愚蠢，但我无法用任何其他方法解决这个问题，我必须让它们以某种方式发挥作用。我也很高兴听到你的想法…：

补丁后的新图例：

表示有一个名为lineHeight的属性，但自Highcharts 2.1以来，该属性已被弃用

这名官员的职位也证实了这一点。因此，您可以根据需要修改源代码以更改高度，或者在图表呈现后尝试使用javascript更正项目高度

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

e、 g.填充底部：“10px”

检查示例：

表示有一个名为lineHeight的属性，但自Highcharts 2.1以来，该属性已被弃用

这名官员的职位也证实了这一点。因此，您可以根据需要修改源代码以更改高度，或者在图表呈现后尝试使用javascript更正项目高度

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

e、 g.填充底部：“10px”

检查示例：

---

可能是虫子吗？我是说它看起来很奇怪…：我可能遗漏了一些东西，但我看不出该屏幕截图有任何错误。@wergeld页边距顶部和底部设置为15，但你看不到。。。我已经用JS解决了这个问题，很快就会在这里发布是的，在图例图像上显示边框可能会更好，这样可以看到边距的差异。@wergeld我已经用自己的解决方案更新了这个问题。问题在于图例上项目之间的距离，如线条高度，而不是图例边框的边距。顺便说一句，我想没有边界也很清楚可能是虫子吗？我是说它看起来很奇怪…：我可能遗漏了一些东西，但我看不出该屏幕截图有任何错误。@wergeld页边距顶部和底部设置为15，但你看不到。。。我已经用JS解决了这个问题，很快就会在这里发布是的，在图例图像上显示边框可能会更好，这样可以看到边距的差异。@wergeld我已经用自己的解决方案更新了这个问题。问题在于图例上项目之间的距离，如线条高度，而不是图例边框的边距。顺便说一句，我想没有边界也很清楚或者将itemStyle.padding设置为5。谢谢Hardik，正如您所看到的，我已经解决了这个问题，但是您是对的，谢谢您提供的信息！：或者将itemStyle.padding设置为5。谢谢Hardik，正如您所看到的，我已经解决了这个问题，但是您是对的，谢谢您提供的信息！：

// 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;

});