谷歌图表y轴文字被切断(svg-tag太宽)

时间:2013-01-16 12:33:35

标签: google-visualization

我在工作中实现了谷歌图表功能,而且它的工作效果非常好。

我刚刚注意到图表中的一个错误。图表的左侧(更具体地说是y轴的文本,正在被切断。

目前我的谷歌图表的宽度是460像素,但是当我用firebug查看图表时,我看到图表中的svg-tag正确设置为460宽度,但实际上是472px宽(结果你可以在下面的图片中看到。)

http://i.imgur.com/uAuD7.png

有趣的是,在更大的显示屏(fx.600px宽)中,它可以完美地运行。如果我在javascript中插入yAxis标题,它的作用也是如此。

我不知道如何解决这个问题,但我希望你们中的一些人遇到同样的问题,并提出解决方案或解决方案。

绘制图表的普通div的图片,打开了firebug布局

google图表中svg-tag的图片(注意元素比另一个更大,并且它的左侧使用更多空间,即其父元素(div)。

两者都可以在这里找到:

http://imgur.com/8owiA,SsgM2#0

问候,马丁。

1 个答案:

答案 0 :(得分:0)

问题是谷歌图表计算了图表中的位置和大小,并考虑了字体大小。

我的css覆盖了" auto"字体大小谷歌图表正在使用(在我的情况下为12px),我的css中有13px字体大小。

解决方案是获取指定的"文本" css-path' s(在这种情况下:svg g g g文本)并使文本12px(在.css文件中)

或者只是在谷歌图表的javascript中设置与我的CSS相关的正确字体大小,如下所示:

vAxis: {textStyle: {fontSize: 13}}