在向图例项目应用自定义字体时,Highcharts
中的图例项目样式存在问题。实际上项目彼此非常接近,itemMarginBottom
和itemMarginTop
无效。
以下是我的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;
});
我知道它太愚蠢了,但我无法用其他任何方式解决这个问题,我不得不以某种方式让它们发挥作用。我很高兴听到你的想法...... :)
补丁后的新传说:
答案 0 :(得分:3)
Highchart documentation表示有一个名为lineHeight
的属性,但自Highcharts 2.1以来已被弃用
官方Highcharts forum的帖子也证实了这一点。所以,您可以根据需要修改源代码以更改高度,或者在图表渲染后尝试使用javascript更正项目高度。
此外,还有一个名为itemStyle
的属性,允许为图例项设置CSS。
e.g。 paddingBottom: '10px'
检查示例: