在同一页面上呈现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

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

您可以尝试定义可用的格式字符串（有关详细信息，请参阅Google documentation），但这似乎是Google API中的一个错误，请参阅phts的answer支持页面。

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/