如何在google時間軸圖表中加載點擊事件的信息

我正在使用Google Timeline chart並希望通過點擊城市名稱加載一些城市的詳細信息，但不知道如何做到這一點。如何在google時間軸圖表中加載點擊事件的信息

<div id="cityData"> 

    <!-- city information display hear after ajax success --> 

</div> 

<div id="timeline" style="height: 180px;"></div>

google.charts.load('current', {'packages':['timeline']}); 
google.charts.setOnLoadCallback(drawChart); 
function drawChart() { 
    var container = document.getElementById('timeline'); 
    var chart = new google.visualization.Timeline(container); 
    var dataTable = new google.visualization.DataTable(); 

    dataTable.addColumn({ type: 'string', id: 'President' }); 
    dataTable.addColumn({ type: 'date', id: 'Start' }); 
    dataTable.addColumn({ type: 'date', id: 'End' }); 
    dataTable.addRows([ 
    [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], 
    [ 'Adams',  new Date(1797, 2, 4), new Date(1801, 2, 4) ], 
    [ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]); 

    chart.draw(dataTable); 
}

小提琴：https://jsfiddle.net/whaqcfnx/

感謝

來源

2016-12-16 Mr.Happy

哦。對不起。我正在更新我的鏈接。 :) –

有沒有關於城市的數據，只有總統 – zer00ne

@ zer00ne我想點擊'華盛頓，亞當斯，傑弗遜'名稱加載一些HTML但沒有得到想法。 –

你可以添加一個事件偵聽器，通過圖表生成的text標籤

的text元件HA已經爲'text-anchor'

的屬性的屬性將有一個'end'值行標籤

只需要等待'ready'事件觸發

看到下面的工作片段...

google.charts.load('current', { 
 
    packages: ['timeline'], 
 
    callback: function() { 
 
    var container = document.getElementById('timeline'); 
 
    var chart = new google.visualization.Timeline(container); 
 
    var dataTable = new google.visualization.DataTable(); 
 

 
    dataTable.addColumn({ type: 'string', id: 'President' }); 
 
    dataTable.addColumn({ type: 'date', id: 'Start' }); 
 
    dataTable.addColumn({ type: 'date', id: 'End' }); 
 
    dataTable.addRows([ 
 
     [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], 
 
     [ 'Adams',  new Date(1797, 2, 4), new Date(1801, 2, 4) ], 
 
     [ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]); 
 

 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
     var rowLabels = container.getElementsByTagName('text'); 
 
     Array.prototype.forEach.call(rowLabels, function (label) { 
 
     if (label.getAttribute('text-anchor') === 'end') { 
 
      label.addEventListener('click', displayDetails, false); 
 
     } 
 
     }); 
 
    }); 
 

 
    function displayDetails(sender) { 
 
     document.getElementById('cityData').innerHTML = 'City Data for: ' + sender.target.innerHTML; 
 
    } 
 

 
    chart.draw(dataTable); 
 
    } 
 
});

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

來源

2016-12-17 20:29:02 WhiteHat

希望這有助於... – WhiteHat

如何在google時間軸圖表中加載點擊事件的信息

回答

相關問題