2016-09-27 7 views
3

Googleの図表で作業していて、グラフが描画された後に値を取得しようとすると、「描画」が完了した後に実行されるコールバック関数を作成する必要があることを理解しています。それを動作させることはできません... 関数 "draw"が完了した後に、関数 "afterDraw"を呼び出すと、どこで実行されますか? 'ready'イベントGoogleの図表 - 描画後に関数を実行する

のリスナーを追加し、チャートは、それが描かれている前に作成され、された後、... 感謝:)

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>

答えて

2

を助けてください

グラフが描画されたときにこれを知らせます

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>

+0

はい...作業スニペットを以下参照してください!ありがとうございました! :) – Haksuma

関連する問題