在Google图表中添加超链接到自定义工具提示 [英] Add hyperlink to custom tooltip in Google Charts

问题描述

使用此解决方法，我可以模仿在选择时显示工具提示为谷歌时间表图表。这个问题是，我打算有一个邮件链接在工具提示供用户点击。但是，在我的函数 creatToolTip（）中，创建了工具提示，但我无法点击联系链接。什么是这样做的正确方法？编辑：我也试过 Google的工具提示操作，但它在时间线图表中不受支持。

  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：'string'，id：'Name'}）; dataTable.addColumn（{type：'string'，role：'tooltip'，'p'：{'html'：true}}）; dataTable.addColumn（{type：'date'，id：'Start'}）; dataTable.addColumn（{type：'date'，id：'End'}）; dataTable.addRows（[['Washington'，'test'，createToolTip（），new Date（1789，3，30），new Date（1797，2，4）]，['Adams'，'test'，createToolTip ），新日期（1797,2,4），新日期（1801,2,4）]，['杰斐逊'，'测试'，createToolTip（），新日期（1801,2,4），新日期（1809） ，2，4）]]）; // select-handler google.visualization.events.addListener（chart，'select'，function（e）{//内置的工具提示var tooltip = document.querySelector（'。google-visualization-tooltip：not（[clone ]）'）; //当有任何if（chart.ttclone）{chart.ttclone.parentNode.removeChild（chart.ttclone）}时，删除以前的克隆//创建内置工具提示图表的克隆.ttclone = tooltip .cloneNode（true）; / /创建一个自定义属性，以便能够区分//内置的工具提示和克隆chart.ttclone.setAttribute（'clone'，true）; //将克隆注入到文档tooltip.parentNode.insertBefore（ chart.ttclone，chart.tooltip）;}）; chart.draw（dataTable，{tooltip：{isHtml：true}}）;} function createToolTip（）{var mainDiv ='< div>'; var list ='< ul class =google-visualization-tooltip-action-list>'+'< li class =google-visualization-tooltip-action>'+'< span style = font-family：font-weight：bold;>'+'< a href =font-size：12px; color：rgb（0，0，0）; margin：0px mailto：[e-mail]？Subject = test>联系人< / a>'+'< / span>'+'< / li>'+'< / ul>'; var endMainDiv ='< / div>'; var tooltip = mainDiv + list + endMainDiv;返回工具提示; }  

.google-visualization-tooltip {opacity：0！重要; max-width：200px！important;}。google-visualization-tooltip [clone] {opacity：1！important;} html，body，timeline {width：100％;身高：100％;保证金：0; padding：0;}

< script src =https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< script type =text / javascriptsrc =https：// www ？.google.com / JSAPI自动加载= { '模块'：[{ '名称'： '可视化'， '版本'： '1.1'， '包'：[ '时间轴']}]}>< / script>< div id ='timeline'style =height：90％>< / div>

解决方案

看起来像指针事件默认设置为'none'

<在将克隆注入到dom之前，将其更改为'auto'


  //将克隆注入文档
 chart.ttclone.style.pointerEvents ='auto'; 
 tooltip.parentNode.insertBefore（chart.ttclone，chart.tooltip）; 
  

请参阅以下工作片段...

  
  .google-visualization-tooltip {opacity：0！important; max-width：200px！important;}。google-visualization-tooltip [clone] {opacity：1！important;} html，body，timeline {width：100％;身高：100％;保证金：0; padding：0;}  

< script src =https ：//www.gstatic.com/charts/loader.js>< / script>< div id =timelinestyle =height：90％>< / div>

Using this workaround, I was able to mimic showing tooltip upon selection for a google timeline chart. This issue is that I plan on having a mail to link in the tooltip for the user to click on. However, in my function creatToolTip(), the tooltip is created but I'm unable to click on the contact link. What is the correct way to do this?

EDIT: I also tried Google's tooltip actions but it is not supported in timeline charts.

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: 'string', id: 'Name' });
  dataTable.addColumn({ type: 'string', role: 'tooltip', 'p': {'html': true}});
  dataTable.addColumn({
    type: 'date',
    id: 'Start'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'End'
  });
  dataTable.addRows([
    ['Washington', 'test', createToolTip(), new Date(1789, 3, 30), new Date(1797, 2, 4)],
    ['Adams', 'test', createToolTip(), new Date(1797, 2, 4), new Date(1801, 2, 4)],
    ['Jefferson', 'test', createToolTip(), 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 }});
}

function createToolTip() {
       var mainDiv = '<div >';
       var list =
            '<ul class="google-visualization-tooltip-action-list">' +
                '<li class="google-visualization-tooltip-action">' +
                    '<span style="font-family: Arial; font-size: 12px; color: rgb(0, 0, 0); margin: 0px; text-decoration: none; font-weight: bold;">' +
                        '<a href="mailto:[e-mail]?Subject=test">Contact</a>' +
                    '</span>' +
                '</li>' +
            '</ul>';
       var endMainDiv = '</div>';
       var tooltip = mainDiv + list + endMainDiv;
       return tooltip;
    }

.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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

解决方案

looks like pointer-events are set to 'none' by default

change to 'auto' before injecting the clone back into the dom

//inject clone into document
chart.ttclone.style.pointerEvents = 'auto';
tooltip.parentNode.insertBefore(chart.ttclone, chart.tooltip);

see following working snippet...

google.charts.load('current', {
  callback: function () {
    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: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'string', role: 'tooltip', 'p': {'html': true}});
    dataTable.addColumn({
      type: 'date',
      id: 'Start'
    });
    dataTable.addColumn({
      type: 'date',
      id: 'End'
    });
    dataTable.addRows([
      ['Washington', 'test', createToolTip(), new Date(1789, 3, 30), new Date(1797, 2, 4)],
      ['Adams', 'test', createToolTip(), new Date(1797, 2, 4), new Date(1801, 2, 4)],
      ['Jefferson', 'test', createToolTip(), 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
      chart.ttclone.style.pointerEvents = 'auto';
      tooltip.parentNode.insertBefore(chart.ttclone, chart.tooltip);
    });

    function createToolTip() {
       var mainDiv = '<div style="z-index: 1000;">';
       var list =
            '<ul class="google-visualization-tooltip-action-list">' +
                '<li class="google-visualization-tooltip-action">' +
                    '<span style="font-family: Arial; font-size: 12px; color: rgb(0, 0, 0); margin: 0px; text-decoration: none; font-weight: bold;">' +
                        '<a href="mailto:[e-mail]?Subject=test">Contact</a>' +
                    '</span>' +
                '</li>' +
            '</ul>';
       var endMainDiv = '</div>';
       var tooltip = mainDiv + list + endMainDiv;
       return tooltip;
    }

    chart.draw(dataTable, {tooltip: {isHtml: true }});
  },
  packages: ['timeline']
});

.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 src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline" style="height:90%"></div>

这篇关于在Google图表中添加超链接到自定义工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！