同一页面上有两个谷歌图表的渲染问题

Rendering issue with 2 Google charts on the same page

本文关键字：谷歌 问题 两个 一页      更新时间：2023-09-26

当我在同一页面上有两列材料的谷歌图表时，我遇到了渲染问题。基本上，第一列部分绘制在与第二个图表的轴相对应的垂直线上。如果我只有一张图表-一切都好。

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

  • 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

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

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

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

你最好直接在谷歌图表项目页面上找到/讲述你的问题-https://code.google.com/p/google-visualization-api-issues/issues/list.

事情是这样的，两个表在同一行，它们的Y轴单位混淆了图表的样式。我的意思是；

第一种情况下有两位数字[25，34，33，45，…，26]，第二种情况下是五位数字[312094365842007，…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/

相关文章：