使用选择触发谷歌时间线工具提示 [英] Trigger google timeline tooltip with selection
问题描述
我需要在选择而不是悬停时触发时间线图表工具提示.这似乎不起作用.
I need to trigger the Timeline chart tooltip on selection instead of hover. This doesn't seem to work.
如果我在图表选项中有这个,我会得到我的工具提示:tooltip: { isHtml: true, trigger: 'focus' }
I get my tooltips if I have this in the chart options: tooltip: { isHtml: true, trigger: 'focus' }
但是如果我把它改成这样:tooltip: { isHtml: true, trigger: 'selection' },当我点击时间轴栏时,工具提示不显示.
But if I change it to this: tooltip: { isHtml: true, trigger: 'selection' }, the tooltips don't show up when I click the timeline bars.
这应该可以通过时间线图表实现吗?我在文档中找不到任何说它不受支持的内容,尽管我可能错过了一些东西......
Is this supposed to be possible with the Timeline chart? I can't find anything in the docs to say that it isn't supported, although I might have missed something...
推荐答案
唯一支持的 trigger
将在 Timeline-chart 中打开工具提示是 focus
The only supported trigger
which will open a tooltip in a Timeline-chart is focus
可能的解决方法:
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
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)]
]);
//select-handler
google.visualization.events.addListener(chart, 'select', function(e) {
//the built-in tooltip
var tooltip = document.querySelector('.google-visualization-tooltip:not([clone])');
//remove previous clone when there is any
if (chart.ttclone) {
chart.ttclone.parentNode.removeChild(chart.ttclone)
}
//create a clone of the built-in tooltip
chart.ttclone = tooltip.cloneNode(true);
//create a custom attribute to be able to distinguish
//built-in tooltip and clone
chart.ttclone.setAttribute('clone', true);
//inject clone into document
tooltip.parentNode.insertBefore(chart.ttclone, chart.tooltip);
});
chart.draw(dataTable, {tooltip: {isHtml: true }});
}
.google-visualization-tooltip {
opacity: 0 !important;
max-width: 200px !important;
}
.google-visualization-tooltip[clone] {
opacity: 1 !important;
}
html,
body,
timeline {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['timeline']}]}"></script>
<div id='timeline' style="height:90%"></div>
它仍然使用默认行为(焦点提示).但是内置的工具提示是隐藏的(通过 CSS)
It still uses the default-behaviour(tooltip on focus). But the built-in tooltip is hidden(via CSS)
在选择处理程序中,它从文档中获取内置工具提示(它是隐藏的,但它仍然存在)并创建一个将被注入到文档中的克隆.
In the select-handler it fetches the built-in tooltip out of the document(it's hidden, but it's still there) and creates a clone which will be injected into the document.
这篇关于使用选择触发谷歌时间线工具提示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!