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

google charts - run function after draw

本文关键字：功能 绘制 运行 谷歌      更新时间：2023-09-26

与谷歌图表工作，试图从图表中得到一个值完成绘图后，我知道我需要做一个回调函数，将"绘制"完成后运行-但我不能让它工作…我在哪里调用函数"afterDraw"，使其运行后功能"绘制"完成?请帮助. .谢谢:)

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>

在创建图表之后在绘制图表之前

为'ready'事件添加一个监听器

这将告诉你图表何时绘制完成

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

请参阅下面的工作代码片段…

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>

相关文章：