澳门银河网上官方赌场_老品牌值得信赖

ITKeyword,专注技术干货聚合推荐

注册 | 登录

解决charts - Trigger google timeline tooltip with selection

itPublisher 分享于

2020腾讯云双十一活动,全年最低!!!(领取3500元代金券),
地址https://cloud.tencent.com/act/cps/redirect?redirect=1073

【阿里云】双十一活动,全年抄底价,限时3天!(老用户也有),
入口地址https://www.aliyun.com/1111/home

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

charts google-visualization tooltip timeline
edited Aug 27 '15 at 12:54 asked Aug 27 '15 at 11:16 loz 20 3

 | 

1 Answers
1

解决方法

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.


answered Aug 27 '15 at 22:41 Dr.Molle 94.6k 10 125 143

 | 


相关阅读排行


相关内容推荐

最新文章

×

×

请激活账号

为了能正常使用评论、编辑功能及以后陆续为用户提供的其他产品,请激活账号。

您的注册邮箱: 修改

重新发送激活邮件 进入我的邮箱

如果您没有收到激活邮件,请注意检查垃圾箱。

澳门银河网上官方赌场