Highcharts样式，Legend&自定义字体 [英] Highcharts styling, Legend & custom fonts

问题描述

将自定义字体应用于图例项目时，我在Highcharts中设置图例项目的样式时遇到问题.实际上，项目彼此之间是如此接近，并且itemMarginBottom和itemMarginTop无法正常工作.

I have a problem with styling legend items in Highcharts, when applying a Custom Font to the legend items. Actually items are so close to each other and itemMarginBottom and itemMarginTop are not working.

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

Here is part of my Highcharts code:

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

这是图例的屏幕截图:

我的丑陋解决方案:

我像下面这样解决了，但可悲的是硬编码:

I solved that like below, but sadly hard-coded:

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

});

我知道它是如此愚蠢，但是我无法以其他任何方式解决该问题，因此我不得不使它们以某种方式工作.我也很高兴听到您的想法...:)

I know that it's so stupid, but I couldn't solve that in any other ways, and I had to make them works somehow. I would be happy to hear your thoughts also ... :)

补丁后的新图例:

推荐答案

Highchart文档表示存在一个名为lineHeight的属性，但自Highcharts 2.1起已弃用该属性

The Highchart documentation says that there is a property called lineHeight but Its deprecated since Highcharts 2.1

官方 Highcharts论坛也确认相同.因此，您可以根据需要修改源代码以更改高度，或者在图表渲染后尝试使用JavaScript纠正项目高度.

The post of official Highcharts forum also confirms the same. So, Either you can hack source code to change the height according to your need or Try to correct item height with javascript after chart render.

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

Also, There is an attribute called itemStyle which allows to set CSS for legend item.

例如paddingBottom: '10px'

检查示例:

查看全文