通過鏈接谷歌可視化表

包裹每一行我對每個錶行一個彈出窗口，一旦用戶從通過鏈接谷歌可視化表

google.visualization.events.addListener(table, 'select', function() {}

但默認情況下谷歌的可視化表中的行不顯示爲可點擊選擇。

我希望它們顯示爲可點擊給用戶。所以我沒有運氣就添加了這個代碼。

var container = document.getElementById(divName); 
var table = new google.visualization.Table(container); 
table.draw(data, options); 
google.visualization.events.addListener(table, 'ready', function() { 
    container.getElementsByTagName('TR')[0].html = '<a href="#" />'; 
    console.log("table ready"); 
});

即使控制檯不打印任何東西。任何幫助將被appriciated。

來源

2016-08-03 Zusee Weekin

如果你只想當用戶將鼠標懸停
您可以使用CSS圖表上div

#chart_div tr { 
    cursor: pointer; 
}

你也可以使用圖表的cssClassNames選項，並指定CSS行光標變成手這樣
唯一的問題有你失去圖表的默認CSS，
因此，如果您想要一個'提供的不僅僅是cursor

更多超鏈接」顯示，您可以更改第一個單元格
的文本，但你不能在一個錨定標記<a>

看到下面的工作片段，其中既包含包住整個行...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Month', '2015', '2016'], 
 
     ['Jan', 10, 15], 
 
     ['Feb', 12, 18], 
 
     ['Mar', 14, 21], 
 
     ['Apr', 16, 24] 
 
    ]); 
 

 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.Table(container); 
 

 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
     var tableRows = container.getElementsByTagName('tbody')[0].rows; 
 
     // change first cell to link 
 
     Array.prototype.forEach.call(tableRows, function(row) { 
 
     row.cells[0].innerHTML = '<a href="#">' + row.cells[0].innerHTML + '</a>'; 
 
     }); 
 
    }); 
 

 
    chart.draw(data, { 
 
     allowHtml: true 
 
    }); 
 
    }, 
 
    packages: ['table'] 
 
});

#chart_div tr { 
 
    cursor: pointer; 
 
}

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

來源

2016-08-03 12:50:37 WhiteHat

它的工作。謝啦。！ –

通過鏈接谷歌可視化表

回答

相關問題