将自定义字体应用于图例元素时,我在 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;
});
我知道这太愚蠢了,但我无法以任何其他方式解决这个问题,我必须让它们以某种方式工作。我也很高兴听到你的想法......:)
补丁后的新传奇:
最佳答案
Highchart documentation说有一个名为 lineHeight
的属性,但自 Highcharts 2.1 起已弃用
官方帖子Highcharts forum也证实了同样的情况。因此,您可以破解源代码以根据您的需要更改高度,或者尝试在图表渲染后使用 javascript 更正元素高度。
此外,还有一个名为 itemStyle
的属性,它允许为图例项设置 CSS。
例如paddingBottom:'10px'
检查示例:
关于css - Highcharts 样式、图例和自定义字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12777635/