Highcharts styling, Legend & custom fonts

自作多情 提交于 2019-12-12 17:31:25

问题


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.

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'
    }
},

And here is the legend's screenshot:

My Ugly Solution:

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 ... :)

The new legends after the patch:


回答1:


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

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.

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

e.g. paddingBottom: '10px'

Check the example :

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



来源:https://stackoverflow.com/questions/12777635/highcharts-styling-legend-custom-fonts

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!