[英]Google Charts - Tooltips
我正在嘗試向時間表添加工具提示,但是卻遇到了非常奇怪的結果:
var container = document.getElementById('example2.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
在這里做一些動態的事情並循環:
dataTable.addRow([$(this).attr('ows_Title'),start,end,"Status: " + $(this).attr("ows_Status")]);
chart.draw(dataTable);
圖表填充完美,沒有工具提示!
有人有想法么? 附件是我的結果!
這是一張圖片:
如果您查看文檔,則不支持時間軸的html工具提示:
但是,您可以使用onmouseover事件監聽器並根據e.row
值設置工具提示來e.row
。 這是一個簡單的示例:
function myHandler(e){
if(e.row != null){
$(".google-visualization-tooltip").html(dataTable.getValue(e.row,3)).css({width:"auto",height:"auto"});
}
}
google.visualization.events.addListener(chart, 'onmouseover', myHandler);
完整示例: http : //jsfiddle.net/s9g99pqk/1/
改變這個:
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
它應該是:
dataTable.addColumn({type: 'string', role: 'tooltip', p: {'html': true}});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.