Google可视化库加载创建了两个不同的结果 [英] Google Visualization library loading creates two different results

问题描述

我在正确加载Google Visualization库时遇到了一个非常令人沮丧的问题。我的页面上有两个图表。一个是柱状图，另一个是线图。

我正在加载我的库，像这样：
google.load（'visualization'，'1.0'，{'packages'：[ 'corechart']，'callback'：drawcharts}）;

然后我打电话给我的柱形图如下：

  var chart = new google.visualization.ColumnChart（chartDiv）
  

和我的折线图如下所示：

  myLineChart = new google.visualization.LineChart（document.getElementById （ 'myChart2'））; 
  

结果如下两个图表：

第一张图是线条图，即问题。当我反而像这样加载我的可视化库：

  google.load（'visualization'，'1.0'，{'packages' ：['linechart'，'columnchart']，'callback'：drawcharts}）; 
  

我得到我的线条图是我想要的：

但我的柱状图变成这样：

如何加载所需的库，以便我可以获得线图的核心图版本和普通的柱图（而不是核心图）？基本上，图像2和3？ corechart.linechart与加载线图有什么不同？

解决方案

如此愚蠢的错误。我的图表div的宽度和我在图表选项中设置的宽度不一样。当我使它们相同时，它工作正常。

I'm having a very frustrating issue with proper loading of the Google Visualization library. I have two charts on my page. One is a columnchart and the other is a linechart.

Im loading my library like this: google.load('visualization', '1.0', {'packages':['corechart'],'callback':drawcharts});

Then im calling my columnchart like this:

var chart = new google.visualization.ColumnChart(chartDiv)

and my linechart like this:

myLineChart = new google.visualization.LineChart(document.getElementById('myChart2'));

This results in the following two charts:

The first pic is the linechart and that is the issue. When i instead load my visualization library like this:

google.load('visualization', '1.0', {'packages':['linechart','columnchart'], 'callback': drawcharts});

I get my linechart how I want it:

but my columnchart becomes like this:

I've tried adjusting the bar:groupwidth on the columnchart but i'm getting issues when using an Addlistener event on the columnchart.

How can I load the libraries required so I can have the corechart version of the linechart and the normal columnchart (not the one with corechart)? Basically, image 2 and 3? How is corechart.linechart different from just loading linechart?

解决方案

Such a silly mistake. My width of my chart div and the width set in my chart options were not the same. When I made them the same, it works fine.

这篇关于Google可视化库加载创建了两个不同的结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！