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>
希望... – WhiteHat
パーフェクト - ありがとう! – Cmaso
フォローアップ - chart.draw(dataTable、options);を使用します。タイムラインアイテムをクリックしてもツールチップは消えません。その代わりに、私は単に "drawChart();"を呼び出し、ツールチップが消えるようにします。 – Cmaso