在mouseout Google Chart

时间：2016-07-28 21:47:11

标签： javascript jquery css google-api google-visualization

我正在使用时间线谷歌图表。基于此question，我正在尝试添加功能以仅在鼠标移出工具提示时删除工具提示。我的下面的函数成功删除了一次，然后然后抛出错误。此外，我只能在鼠标移出工具提示后将其删除。

google.visualization.events.addListener(chart, 'onmouseout', function (e) {
     if ( chart.ttclone.parentNode != null) {
         chart.ttclone.parentNode.removeChild(chart.ttclone)
     }
});

以下是整个代码段。这样做的正确方法是什么？ 

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:test@test.com?Subject=test">Contact</a>' +
                    '</span>' +
                '</li>' +
            '</ul>';
       var endMainDiv = '</div>';
       var tooltip = mainDiv + list + endMainDiv;
       return tooltip;
    }
    
            google.visualization.events.addListener(chart, 'onmouseout', function (e) {
            if ( chart.ttclone.parentNode != null) {
                chart.ttclone.parentNode.removeChild(chart.ttclone)
            }
        });

    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>

1 个答案:

答案 0 :(得分：1)

我想你想在工具提示上听'onmouseout'，
而不是chart
chart.ttclone.parentNode.addEventListener('mouseout', ...

同样 - chart.ttclone.parentNode似乎同时抛出mouseover＆amp;多次mouseout次

如果您多次尝试removeChild，可能会导致错误

相反，请尝试style.display = 'none'或类似的东西......

请参阅以下工作代码段... 

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);
      chart.ttclone.parentNode.addEventListener('mouseout', function () {
        chart.ttclone.style.display = 'none';  
      }, false);
      chart.ttclone.parentNode.addEventListener('mouseover', function () {
        chart.ttclone.style.display = 'block';  
      }, false);
    });

    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:test@test.com?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>

相关问题
最新问题