Javascript Highcharts-图例项填充
Highcharts中标签项的文本填充似乎存在问题。与Chrome相比,我在Firefox中获得了非常不同的结果: 如果我检查浏览器中的元素,tspan标记在Chrome中的高度为16px,但在Chrome中为20px。在FF中,似乎添加了一些像素作为填充,因为文本并没有填充整个标记。我已经尝试了Javascript Highcharts-图例项填充,javascript,jquery,highcharts,Javascript,Jquery,Highcharts,Highcharts中标签项的文本填充似乎存在问题。与Chrome相比,我在Firefox中获得了非常不同的结果: 如果我检查浏览器中的元素,tspan标记在Chrome中的高度为16px,但在Chrome中为20px。在FF中,似乎添加了一些像素作为填充,因为文本并没有填充整个标记。我已经尝试了legend.itemStyle的行高和字体大小设置,但没有成功 有人有什么想法吗?Firefox 25.0.1和Chrome 31.0.1650.57m 附加符合JSFIDLE限制的代码: var
legend.itemStyle
的行高和字体大小设置,但没有成功
有人有什么想法吗?Firefox 25.0.1和Chrome 31.0.1650.57m
附加符合JSFIDLE限制的代码:
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]}]
});
你能和主版本核对一下吗?这是一个例子:
对我来说,它看起来很好,请参见:
- FF:
- 铬:
可能是由于线宽的计算不同而导致了较小的差异(~1px)。尝试使用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'
}
}
你好我的浏览器没有变化。这张照片是从你的小提琴上拍摄的。我用浏览器版本号编辑了我的文章。我在FF 25(Windows 7版本,MacOSX版本)中进行了测试,在所有情况下,iti si都显示为Pawel提到的版本。你能告诉我你用哪种系统吗?