Googleのタイムラインでクリック機能を使用する方法

Question

私はGoogleタイムラインチャートを使用しており、クリック機能を使用したいと考えています。色の付いた四角形やテキストをクリックしただけで、ブートストラップモーダルが表示されます。

google.charts.load("current", {packages:["timeline"]}); 
google.charts.setOnLoadCallback(drawChart); 
function drawChart() { 

var container = document.getElementById('example5.1'); 
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', 'Beginning JavaScript',  new Date(2017, 1, 30), 
new Date(2017, 2, 30) ], 
    [ 'Learning for Life', 'Intermediate JavaScript', new Date(2017, 3, 1), 
new Date(2017, 4, 30) ], 
    [ 'Magnolia Room', 'Advanced JavaScript',  new Date(2017, 5, 01), 
new Date(2017, 6, 30) ], 
    [ 'Willow Room', 'Beginning Google Charts', new Date(2017, 1, 30), 
new Date(2017, 3, 30) ], 
    [ 'Willow Room', 'Intermediate Google Charts', new Date(2017, 4, 30), 
new Date(2017, 5, 30) ], 
    [ 'Willow Room', 'Advanced Google Charts',  new Date(2017, 6, 30), 
new Date(2018, 1, 30) ]]); 

var options = { 
timeline: { colorByRowLabel: true } 
}; 

chart.draw(dataTable, options); 
} 

助けてください、このFiddle

をご覧ください。

Answer 1

タイムラインチャートは

'click'イベントを持っていないが、それは
は、データテーブルから情報を引き出すために、'select'

は、あなたが選択からプロパティを使用することができていない

google.visualization.events.addListener(chart, 'select', function() { 
    var selection = chart.getSelection(); 
    if (selection.length > 0) { 
    console.log(dataTable.getValue(selection[0].row, 1)); 
    } 
}); 

次の作業スニペットを参照してください...

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages:['timeline'] 
 
}); 
 
function drawChart() { 
 
    var container = document.getElementById('example5.1'); 
 
    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', 'Beginning JavaScript', new Date(2017, 1, 30), new Date(2017, 2, 30)], 
 
    ['Learning for Life', 'Intermediate JavaScript', new Date(2017, 3, 1), new Date(2017, 4, 30)], 
 
    ['Magnolia Room', 'Advanced JavaScript', new Date(2017, 5, 01), new Date(2017, 6, 30)], 
 
    ['Willow Room', 'Beginning Google Charts', new Date(2017, 1, 30), new Date(2017, 3, 30)], 
 
    ['Willow Room', 'Intermediate Google Charts', new Date(2017, 4, 30), new Date(2017, 5, 30)], 
 
    ['Willow Room', 'Advanced Google Charts', new Date(2017, 6, 30), new Date(2018, 1, 30)] 
 
    ]); 
 

 
    var options = { 
 
    timeline: { 
 
     colorByRowLabel: true 
 
    } 
 
    }; 
 

 
    google.visualization.events.addListener(chart, 'select', function() { 
 
    var selection = chart.getSelection(); 
 
    if (selection.length > 0) { 
 
     console.log(dataTable.getValue(selection[0].row, 1)); 
 
    } 
 
    }); 
 

 
    chart.draw(dataTable, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="example5.1"></div>

の