2016-08-12 16 views
0

GoogleビジュアライゼーションAPIを使ってグラフを表示しています。ユーザーがグラフ項目をクリックすると、ポップアップを開くイベントハンドラが呼び出されます(ただし、以下の例ではアラートのみ)。それは動作しますが、一度だけ動作します。アイテムをクリックすると、選択されたままになるので、イベントハンドラを再度起動しません(これは '選択'イベントをリスンしています)。Googleの視覚化による無限ループを防ぐ方法setSelection()?

ドキュメントでは、setSelection()メソッドを呼び出し、何もない、null、または空の配列を引数として渡すと、すべての選択が解除されます。しかし、イベントハンドラの最後にそれを追加すると、実際には選択されたアイテムが再選択され、無限ループに巻き込まれます。私のコードの簡略化、作業バージョンは以下の通りです:

<!---Google Charts---> 
    <script src="https://www.gstatic.com/charts/loader.js"></script> 
    <script> 
      google.charts.load("current", {packages:["timeline"]}); 
      google.charts.setOnLoadCallback(drawChart); 

      function drawChart() { 
       var container = document.getElementById('timelineholder'); 
       var chart = new google.visualization.Timeline(container); 
       var dataTable = new google.visualization.DataTable(); 
       var options = {tooltip: {isHtml: true}}; 

       //Add columns 
       dataTable.addColumn({type: 'string', id: 'Employer'}); 
       dataTable.addColumn({type: 'string', id: 'Job ID'}); 
       dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}}); 
       dataTable.addColumn({type: 'date', id: 'Start Date'}); 
       dataTable.addColumn({type: 'date', id: 'End Date'}); 

       //Add Rows 
       dataTable.addRows([ 
            ['Some Company', 
            '123456', 
            'Some Tooltip Text', 
            new Date(2016,1,1,0,0,0,0), 
            new Date(2016,8,1,0,0,0,0)], 
        ]); 

       chart.draw(dataTable, options); 

       //make rows clickable 
       google.visualization.events.addListener(chart, 'select', function(){ 
        var selectedItem = chart.getSelection()[0]; 
        var placementId = dataTable.getValue(selectedItem.row, 1); 

        alert(placementId); 
        chart.setSelection();//this should effectively deselect the row so it can be clicked on again and fire off the handler again. Instead, it's re-selecting the selected row and causing an infinite loop 
       }); 
      } 
    </script> 

<div id="timelineholder" class="timelineholder"></div> 

答えて

0

Timelineチャートは何かが選択されると、私は、それはエラーも

を引き起こしているので、setSelectionmethod

ずに渡って実行しただけです(Timelineチャート)
グラフを再描画せずに

try ...
回の代わりのchart.draw(dataTable, options);

...このことができます
chart.setSelection();

+0

希望... – WhiteHat

+0

パーフェクト - ありがとう! – Cmaso

+0

フォローアップ - chart.draw(dataTable、options);を使用します。タイムラインアイテムをクリックしてもツールチップは消えません。その代わりに、私は単に "drawChart();"を呼び出し、ツールチップが消えるようにします。 – Cmaso

関連する問題