こんにちは私はGoogleAPIを使用してグラフを描画していますが、このテーブルの各行にイベントを設定したいのですが、この要素をどのように収集すればよいかわかりません。たとえば、マグノリアルームの alert("Magnolia Room clicked");
Googleグラフリンクをクリックするたびにイベントを設定したい：
Google
ここのタイムラインチャートはグーグルjavascriptチャートコードです：
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization',
'version':'1','packages':['timeline']}]}"></script>
<script type="text/javascript">
google.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.3');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'CSS Fundamentals', new Date(0,0,0,12,0,0), new Date(0,0,0,14,0,0) ],
[ 'Magnolia Room', 'Intro JavaScript', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
[ 'Gladiolus Room', 'Intermediate Perl', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Gladiolus Room', 'Advanced Perl', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Gladiolus Room', 'Applied Perl', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
[ 'Petunia Room', 'Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Petunia Room', 'Closure', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Petunia Room', 'App Engine', new Date(0,0,0,21,30,0), new Date(0,0,1,0,30,0) ]]);
var options = {
timeline: { colorByRowLabel: true },
backgroundColor: '#ffd'
};
chart.draw(dataTable, options);
}
</script>
そして私のHTML：
<!DOCTYPE html>
<html>
<head>
<title>sample</title>
</head>
<body>
<div id="example5.3" style="width: 900px; height: 200px;"></div>
</body>
</html>
彼らのためにイベントを設定する方法はありますか？
これを行うには、「select」イベントハンドラーを使用できます。
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
if (selection.length) {
alert(dataTable.getValue(selection[0].bb, 0) + ' clicked');
}
});
選択情報は現在バグがあることに注意してください。選択オブジェクトにはプロパティが必要ですがrow、columnこれらのプロパティは難読化されているため、今のところ、bbプロパティから行インデックスにアクセスする必要があります。タイムラインの視覚化によりnull、すべての選択に対して列インデックスがに設定されるため、そのことを心配する必要はありません。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加