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

Question

I have a rendering problem when I have two column material Google charts on the same page. Basically, the first column gets partially drawn on the vertical line which corresponds to axis of the second chart. If I have only 1 chart - everything is OK.

Please take a look at the following screenshots to see the problem:

• 2 charts (problem): https://www.dropbox.com/s/9p0ji49kpv2vtl1/gc-svg-pb.png?dl=0
• 1 chart (no problems): https://www.dropbox.com/s/12rpxl23ojean2b/gc-svg-1.png?dl=0

Answer 1

It seems to be a problem with the different scales on the Y-axis. If you look at this example the problem is gone, because the widths of the Y-axis labels of both charts are equal: fiddle1

If you force the Y-axis label to a fixed width, using the vAxis.format option for example, the chart is also correctly rendered: fiddle2

You could try to define a usable format string (refer to the Google documentation for more information), but it seems like a bug in the Google API, see phts's answer for the support page.

Answer 2

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

Answer 3

Here is the thing, the two tables are in the same line and their Y-axis unit confuses the charts styling. I mean;

There are two-digit numbers in the first case [25,34,33,45,...,26] and five-digit numbers in the second case [31209,43658,42007,...30177] These five-digit numbers become strings like 20K,40K...

Thus, problem is in that part. One solution can be formatting the numbers as @mhu suggested. Another solution can be using the ColumnChart type by changing the code part;

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

and adding this to the options ;

hAxis: {viewWindowMode: 'maximize'}

https://jsfiddle.net/L0gxnywu/

Solution 2: You can change the div's sequence as;

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

https://jsfiddle.net/3j4s1vfj/