javascript - 保持工具提示足够长的时间以单击 Google 日历图表中的链接

Question

我正在尝试设置 Google 日历图表，以便当用户单击日期时显示包含自定义 HTML(包括链接)的工具提示。我希望工具提示持续存在，以便用户可以实际单击工具提示中的链接。我尝试添加 tooltip: {trigger: 'selection'} 但它没有执行任何操作。有谁知道如何让工具提示持续存在？谢谢!

<script type="text/javascript" id="capture-dates-calendar">
  google.charts.load("current", {packages:["calendar"]});
  google.charts.setOnLoadCallback(drawChart);

 function drawChart() {
     var dataTable = new google.visualization.DataTable();
     dataTable.addColumn({ type: 'date', id: 'Date' });
     dataTable.addColumn({ type: 'number', id: 'Captures' });
     dataTable.addColumn({ type: 'string', role: 'tooltip', p: {'html': true} });
     dataTable.addRows([
        [ new Date(2016,6,10),2,'<div class="calendar-tooltip"><h5>July 10, 2016</h5><p>2 snapshots</p><ul><li><a href="http://wayback.archive-it.org/3507/20160710175703/https://twitter.com/HTI_HTIC/" target="_blank">17:57:03</a></li><li><a href="http://wayback.archive-it.org/3507/20160710135341/https://twitter.com/HTI_HTIC/" target="_blank">13:53:41</a></li></ul></div>']
      ]);

     var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

     var options = { 
        focusTarget: 'category',
        tooltip: { 
          isHtml: true,
          trigger: 'selection'
         },
        colorAxis: { minValue: 1,  colors: ['#17649a', '#0b2e47'] } 
     };                     

     chart.draw(dataTable, options);

 }
</script>

Answer 1

一定是 config options 中缺少 trigger: 'selection' 的原因

您可以使用'select'事件在单独的div中显示相同的工具提示

请参阅以下工作示例...

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'date', id: 'Date' });
    dataTable.addColumn({ type: 'number', id: 'Captures' });
    dataTable.addColumn({ type: 'string', role: 'tooltip', p: {'html': true} });
    dataTable.addRows([
      [ new Date(2016,6,10),2,'<div class="calendar-tooltip"><h5>July 10, 2016</h5><p>2 snapshots</p><ul><li><a href="http://wayback.archive-it.org/3507/20160710175703/https://twitter.com/HTI_HTIC/" target="_blank">17:57:03</a></li><li><a href="http://wayback.archive-it.org/3507/20160710135341/https://twitter.com/HTI_HTIC/" target="_blank">13:53:41</a></li></ul></div>']
    ]);

    var options = {
      focusTarget: 'category',
      tooltip: {
        isHtml: true
      },
      colorAxis: { minValue: 1,  colors: ['#17649a', '#0b2e47'] }
    };

    var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
    var tooltip = document.getElementById('calendar_tooltip');
    google.visualization.events.addListener(chart, 'select', function() {
      var selection = chart.getSelection();
      if ((selection.length > 0) && (selection[0].hasOwnProperty('row'))) {
        tooltip.innerHTML = dataTable.getValue(selection[0].row, 2);
      } else {
        tooltip.innerHTML = '';
      }
    });

    chart.draw(dataTable, options);
  },
  packages: ['corechart', 'calendar']
});

#calendar_tooltip {
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  height: 156px;
  width: 128px;
  text-align: center;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="calendar_basic"></div>
<div id="calendar_tooltip"></div>