谷歌图表-工具提示

Question

我试图在时刻表中添加一个工具提示，但是正在经历非常奇怪的结果：

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);

图表填充完美，除了没有工具提示！

有人有什么想法吗？附件是我的成绩！

以下是一幅图片：

​

​

Answer 1

如果您查看文档，则不支持时间线的html工具提示：

charts

但是，您可以使用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);

完整示例：http://jsfiddle.net/s9g99pqk/1/

Answer 2

改变这一点：

dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

它应该是：

dataTable.addColumn({type: 'string', role: 'tooltip', p: {'html': true}});