同一页面上的2个Google图表出现渲染问题

Question

当我在同一页面上有两个列材质的Google图表时，出现渲染问题。 基本上，第一列在与第二张图表的轴相对应的垂直线上部分绘制。 如果我只有一张图表-一切正常。

请查看以下屏幕截图以查看问题：

• 2个图表（问题）： https : //www.dropbox.com/s/9p0ji49kpv2vtl1/gc-svg-pb.png?dl=0
• 1张图表（没有问题）： https : //www.dropbox.com/s/12rpxl23ojean2b/gc-svg-1.png?dl=0

Answer 1

Y轴上的不同比例似乎是一个问题。 如果看这个例子，问题就消失了，因为两个图表的Y轴标签的宽度相等： fiddle1

如果使用例如vAxis.format选项将Y轴标签强制固定为固定宽度，则图表也将正确呈现： fiddle2

您可以尝试定义可用的格式字符串（有关更多信息，请参阅Google 文档 ），但这似乎是Google API中的错误，请参阅phts的支持页面答案 。

Answer 2

您最好直接在Google Charts项目页面上查找/讲述问题-https: //code.google.com/p/google-visualization-api-issues/issues/list 。

Answer 3

事实是，两个表在同一行中，并且它们的Y轴单位混淆了图表样式。 我的意思是;

第一种情况下有两位数字[25,34,33,45，...，26]，第二种情况下有五位数[31209,43658,42007，... 30177]这五位数字数字变成像20K，40K这样的字符串...

因此，问题就在于那部分。 一种解决方案是按照@mhu的建议格式化数字。 另一种解决方案是通过更改代码部分使用ColumnChart类型。

var chart = new google.visualization.ColumnChart(document.getElementById('traffic-chart'));
chart.draw(data, google.charts.Bar.convertOptions(options));

并将其添加到选项中;

hAxis: {viewWindowMode: 'maximize'}

https://jsfiddle.net/L0gxnywu/

解决方案2：您可以将div的顺序更改为：

<div id="requests-chart"></div>
<div id="traffic-chart"></div>

https://jsfiddle.net/3j4s1vfj/