Highcharts 中标签项目的文本填充似乎存在问题。与 Chrome 相比,我在 Firefox 中得到了非常不同的结果:http://jsfiddle.net/moppa/cMXyG/18/
如果我检查浏览器中的元素,tspan 标签在 Chrome 中的高度为 16 像素,但在 Chrome 中为 20 像素。在 FF 中,看起来像是添加了一些像素作为填充,因为文本没有填满整个标签。我尝试过 legend.itemStyle
的行高和字体大小设置,但没有成功。
有人有什么想法吗?火狐25.0.1和Chrome 31.0.1650.57m
附加代码以符合 JSFiddle 限制:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
legend: {
layout: 'vertical',
itemMarginTop: 0,
itemMarginBottom: 0,
align: 'right',
verticalAlign: 'middle',
padding:0
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]},
{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]},
{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]},
{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]},
{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]},
{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]}]
});
最佳答案
尝试使用如下的 itemMarginBottom 属性:
legend: {
layout: 'vertical',
itemMarginBottom:7,
align: 'right',
verticalAlign: 'top',
itemStyle: {
font: '9pt Raleway,Helvetica,sans-serif',
color: '#A0A0A0'
},
itemHoverStyle: {
color: '#FFF'
},
itemHiddenStyle: {
color: '#444'
}
}
关于javascript - Highcharts - 图例项目填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20187411/