javascript - Google 可视化库加载会产生两个不同的结果

Question

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

我正在像这样加载我的库: 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});

我得到了我想要的折线图:

但是我的柱形图变成这样:

我尝试调整柱形图上的 bar:groupwidth，但在柱形图上使用 Addlistener 事件时遇到问题。

如何加载所需的库，以便获得 corechart 版本的折线图和普通的柱形图(不是带有 corechart 的版本)？基本上，图2和图3？ corechart.linechart 与仅加载折线图有何不同？

Answer 1

真是个愚蠢的错误。我的图表 div 的宽度和图表选项中设置的宽度不一样。当我让它们相同时，效果很好。