触发google时间轴工具提示和选择 [英] Trigger google timeline tooltip with selection

问题描述

我需要在选择时触发时间轴图表工具提示，而不是悬停。这似乎不工作。

如果我在图表选项中有这个：
tooltip：{isHtml：true，trigger：但是如果我把它改成这样：
tooltip：{isHtml：true，trigger：'selection'}，工具提示不显示

这是否可能与时间轴图表是可能的？我不能在文档中找到任何东西，说它不被支持，虽然我可能错过了一些...

解决方案

只有触发器会在时间轴图表中打开工具提示 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（[['华盛顿'，新日期（1789，3，30），新日期（1797,2,4）]，['亚当斯'，新日期（1797,2,4），新日期，2，4）]，['Jefferson'，new Date（1801,2,4），new Date（1809,2,4）]]）; // select-handler google.visualization.events.addListener（chart，'select'，function（e）{//内置工具提示var tooltip = document.querySelector（'。google-visualization-tooltip：not ]）'）; //当有任何if（chart.ttclone）时移除上一个克隆{chart.ttclone.parentNode.removeChild（chart.ttclone）} //创建内置工具提示的克隆.ttclone = tooltip .cloneNode（true）; //创建一个自定义属性，以便能够区分//内置工具提示和克隆chart.ttclone.setAttribute（'clone'，true）; //将clone注入到文档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％;高度：100％; margin：0; padding：0;}  

 < script type = / javascriptsrc =https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1,,packages':[timeline ']}]}>< / script>< div id ='timeline'style =height：90％>< / div>  

它仍然使用默认行为（焦点上的工具提示）。
但是内置的工具提示是隐藏的（通过CSS）

在选择处理程序中，它从文档中获取内置的工具提示，但它仍然存在），并创建一个克隆，将被注入到文档中。

I need to trigger the Timeline chart tooltip on selection instead of hover. This doesn't seem to work.

I get my tooltips if I have this in the chart options: tooltip: { isHtml: true, trigger: 'focus' }

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...

解决方案

The only supported trigger which will open a tooltip in a Timeline-chart is focus

Possible workaround:

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>

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.

这篇关于触发google时间轴工具提示和选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！