Javascript 谷歌图表在第一张图表之后停止绘制 我想做什么

在一页上显示多个条形图

我已经做了什么 条形图以前是线形图。 作为折线图，我可以在同一页上毫无问题地显示两个图表。 我为它们使用了两个单独的drawChart（）函数。 然后我将图表转换为条形图（材质设计）。 现在它只显示一个图表。 我已经搜索了一个答案，并发现： 我遵循这一点，但仍然不起作用

我的代码

加载（“可视化”，“1.1”{
包装：[“酒吧”]
});
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data1=新的google.visualization.DataTable（）；
data1.addColumn（“字符串”、“键1”）；
数据1.添加列（“编号”、“值1”）；
data1.addRows([
['2015.01', 65.5],
['2015.02', 52.6],
['2015.03', 45.5],
['2015.04', 40.7],
['2015.05', 68.7],
['2015.06', 56.4],
['2015.07', 38.4],
['2015.08', 45.2],
['2015.09', 45.2],
['2015.10', 4.8]
]);
var data2=新的google.visualization.DataTable（）；
data2.addColumn（“字符串”、“键2”）；
数据2.添加列（“编号”、“值2”）；
data2.addRows([
['2015.01', 300.08],
['2015.02', 455.08],
['2015.03', 454.62],
['2015.04', 362.93],
['2015.05', 527.12],
['2015.06', 588.28],
['2015.07', 409.93],
['2015.08', 432.08],
['2015.09', 462.33],
['2015.10', 32.38]
]);
var选项={}；
var chart1=新的google.charts.Bar（document.getElementById（“chart_div1”）；
图表1.绘图（数据1，选项）；
var chart2=新的google.charts.Bar（document.getElementById（“chart_div2”）；
图表2.绘图（数据2，选项）；
}

最佳浏览地点：

问题 它只显示一个图表。大多数tme是第一个，但有时是第二个。

---

通过使用alert（）-函数，它可以确认代码一直运行到结束。

似乎此行为与

draw

函数有关。特别是，第二次调用

draw

函数后，不会生成图表SVG，因此不会呈现第二个图表

根据：

draw（）方法是异步的：即它立即返回， 但它返回的实例可能不会立即可用

在页面上绘制多个图表时，可以考虑以下方法：在呈现前一个图表时呈现下一个图表，例如：

var chart1 = new google.charts.Bar(document.getElementById("chart_div1"));
google.visualization.events.addOneTimeListener(chart1, 'ready', function(){
     //render chart2 once chart1 is rendered
     var chart2 = new google.charts.Bar(document.getElementById("chart_div2"));
     chart2.draw(data2, options);     
});
chart1.draw(data1, options);

完整示例

google.load（“可视化”、“1.1”、{packages:[“Bar”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data1=新的google.visualization.DataTable（）；
data1.addColumn（“字符串”、“键1”）；
数据1.添加列（“编号”、“值1”）；
数据1.添加行（[[2015.01'，65.5]，
['2015.02', 52.6],
['2015.03', 45.5],
['2015.04', 40.7],
['2015.05', 68.7],
['2015.06', 56.4],
['2015.07', 38.4],
['2015.08', 45.2],
['2015.09', 45.2],
['2015.10', 4.8]]);
var data2=新的google.visualization.DataTable（）；
data2.addColumn（“字符串”、“键2”）；
数据2.添加列（“编号”、“值2”）；
数据2.添加行（[[2015.01'，300.08]，
['2015.02', 455.08],
['2015.03', 454.62],
['2015.04', 362.93],
['2015.05', 527.12],
['2015.06', 588.28],
['2015.07', 409.93],
['2015.08', 432.08],
['2015.09', 462.33],
['2015.10', 32.38]]);
var选项={}；
绘图图（[{id:'chart_div1'，数据：data1，options:options}，{id:'chart_div2'，数据：data2，options:options}]）；
}
功能图（图表选项、索引）
{
var curIndex=指数| | 0；
var chartOptions=图表选项[curIndex]；
var chart=new google.charts.Bar（document.getElementById（chartOptions.id））；
google.visualization.events.addOneTimeListener（图表'ready'，函数（）{
if（curIndex

---

对于在2016年遇到此问题的任何人，您可能会有与我一样的代码，它引用了旧版本的谷歌图表。更新您的参考资料，以遵循最新的指南。在我的例子中，以下行的行更改修复了该问题：

旧的：

load（'visualization'，'1.1'，{'packages'：['bar']}）；
setOnLoadCallback（绘图图）；
var chart=new google.charts.Bar（document.getElementById（'myDivId'）；
绘制（数据，google.charts.Bar.convertOptions（选项））；

新的：

load（'current'，{packages:['corechart']}）；
google.charts.setOnLoadCallback（drawCharts）；
var chart=new google.visualization.ColumnChart（document.getElementById（'myDivId'）；
图表绘制（数据、选项）；

谢谢-我也是从今天开始遇到这个问题的。谷歌必须对1.0和1.1版本都做了修改。

var chart1 = new google.charts.Bar(document.getElementById("chart_div1"));
google.visualization.events.addOneTimeListener(chart1, 'ready', function(){
     //render chart2 once chart1 is rendered
     var chart2 = new google.charts.Bar(document.getElementById("chart_div2"));
     chart2.draw(data2, options);     
});
chart1.draw(data1, options);

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
google.load('visualization', '1.1', {'packages':['bar']});
google.setOnLoadCallback(drawCharts);
var chart = new google.charts.Bar(document.getElementById('myDivId'));
chart.draw(data, google.charts.Bar.convertOptions(options));

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawCharts);
var chart = new google.visualization.ColumnChart(document.getElementById('myDivId'));
chart.draw(data, options);