Highcharts造型,联想和自定义字体(Highcharts styling, Legend &

2019-09-23 16:16发布

我有一个在造型图例项问题Highcharts ,应用自定义字体传说项目时。 其实项目是如此接近,彼此itemMarginBottomitemMarginTop不工作。

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

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

这里是传说中的截图:

我的丑陋的解决方案:

我解决了像下面,但遗憾的是硬编码:

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

});

我知道这是很愚蠢的,但我没能解决,在任何其他的方式,我不得不让他们的作品以某种方式。 我会很高兴听到你的想法也... :)

该补丁后,新的传说:

Answer 1:

该Highchart文件说有一个属性调用lineHeight ,但它因为Highcharts 2.1弃用

官方的职位Highcharts论坛也印证了相同的。 所以,要么你可以破解源代码,根据您的需要改变高度或尝试后,图表呈现给正确的项目高度用JavaScript。

此外,有称为属性itemStyle它允许设置图例项目CSS。

paddingBottom: '10px'

检查例子:

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



文章来源: Highcharts styling, Legend & custom fonts