同一页面上的 2 Google 个图表呈现问题

Question

当我在同一页面上有两列 material 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

您最好直接在 Google Charts 项目页面上 find/tell 关于您的问题 - https://code.google.com/p/google-visualization-api-issues/issues/list.

Answer 2

好像是Y轴刻度不同的问题。如果您查看此示例，问题就消失了，因为两个图表的 Y 轴标签的宽度相等：fiddle1

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

您可以尝试定义可用的格式字符串（请参阅支持页面的 Google documentation for more information), but it seems like a bug in the Google API, see phts's 。

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/

同一页面上的 2 Google 个图表呈现问题

Rendering issue with 2 Google charts on the same page

javascript

charts

svg

google-visualization