CSS Highcharts 样式、图例和自定义字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12777635/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highcharts styling, Legend & custom fonts
提问by Mahdi
I have a problem with styling legend items in Highcharts, when applying a Custom Fontto the legend items. Actually items are so close to each other and itemMarginBottomand itemMarginTopare not working.
Highcharts将自定义字体应用于图例项时，我在为图例项设置样式时遇到问题。实际上项目彼此如此接近itemMarginBottom并且itemMarginTop不起作用。
Here is part of my Highchartscode:
这是我的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'
}
},
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:
补丁后的新传说：
回答by Hardik Mishra
The Highchart documentationsays that there is a property called lineHeightbut Its deprecated since Highcharts 2.1
该Highchart文件说，有一个叫属性lineHeight，但其自Highcharts 2.1弃用
The post of official Highcharts forumalso 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.
Highcharts官方论坛的帖子也证实了这一点。因此，您可以修改源代码以根据需要更改高度，或者在图表渲染后尝试使用 javascript 更正项目高度。
Also, There is an attribute called itemStylewhich allows to set CSS for legend item.
此外，还有一个名为itemStyle允许为图例项设置 CSS的属性。
e.g. paddingBottom: '10px'
例如 paddingBottom: '10px'
Check the example :
检查示例：
