谷歌图表 - 绘制后运行功能答案

【问题标题】：google charts - run function after draw谷歌图表 - 绘制后运行功能
【发布时间】：2017-02-04 19:13:42
【问题描述】：

使用谷歌图表，在完成绘图后尝试从图表中获取一个值，我知道我需要创建一个回调函数，该函数将在“绘图”完成后运行 - 但我无法让它工作... 我在哪里调用函数“afterDraw”以使其在函数“draw”完成后运行？请帮忙.. 谢谢:)

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addColumn('number', 'Stam');
data.addRows([
  ['Mushrooms', 3,5],
  ['Onions', 1,7],
  ['Olives', 1,3],
  ['Zucchini', 1,5],
  ['Pepperoni', 2,8]
]);

var options = {'title':'How Much Pizza I Ate Last Night',
               'height':500};

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);

}
function afterDraw(){
    alert('all done');
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<div id="chart_div"></div>

【问题讨论】：

标签： javascript jquery google-visualization asynccallback

【解决方案1】：

图表创建之后绘制之前，

为'ready' 事件添加监听器

这会让您知道图表何时绘制完成

google.visualization.events.addListener(chart, 'ready', afterDraw);

请参阅以下工作 sn-p...

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addColumn('number', 'Stam');
data.addRows([
  ['Mushrooms', 3,5],
  ['Onions', 1,7],
  ['Olives', 1,3],
  ['Zucchini', 1,5],
  ['Pepperoni', 2,8]
]);

var options = {'title':'How Much Pizza I Ate Last Night',
               'height':500};

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

google.visualization.events.addListener(chart, 'ready', afterDraw);

chart.draw(data, options);

}
function afterDraw(){
    console.log('all done');
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<div id="chart_div"></div>

【讨论】：