我正在尝试向时间图表添加工具提示,但我遇到了非常奇怪的结果:
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
值设置工具提示来解决此问题。这是一个简单的例子:
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);
关于javascript - Google 图表 - 工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25244261/