谷歌图表甘特图避免工具提示答案

【问题标题】：Google Chart Gannt avoid tooltip谷歌图表甘特图避免工具提示
【发布时间】：2018-08-01 15:59:53
【问题描述】：

通过研究，我发现出现在 Gannt Google Chart 上的工具提示不可自定义，因此我决定覆盖它以捕获由我的 gannt 矩形触发的悬停事件，如下所示：

google.visualization.events.addListener(chart, 'onmouseover', function (e) {
        openTooltip(data, e.row);
    });

但是现在的问题是默认的提示框仍然打开，如何禁用默认提示框？（图表选项/自定义 jquery）

【问题讨论】：

标签： charts google-visualization tooltip

【解决方案1】：

没有任何选项可以删除甘特图上的默认工具提示

工具提示是使用 svg 元素绘制的，当您将鼠标悬停在栏时会动态添加这些元素
我们可以使用MutationObserver 来知道何时添加了工具提示
我们无法删除工具提示，因为它会破坏图表
但我们可以让它不可见/所有元素透明

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages:['gantt']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Task ID');
  data.addColumn('string', 'Task Name');
  data.addColumn('date', 'Start Date');
  data.addColumn('date', 'End Date');
  data.addColumn('number', 'Duration');
  data.addColumn('number', 'Percent Complete');
  data.addColumn('string', 'Dependencies');

  data.addRows([
    ['Research', 'Find sources',
     new Date(2015, 0, 1), new Date(2015, 0, 5), null,  100,  null],
    ['Write', 'Write paper',
     null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
    ['Cite', 'Create bibliography',
     null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
    ['Complete', 'Hand in paper',
     null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
    ['Outline', 'Outline paper',
     null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
  ]);

  var options = {
    height: 275
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.Gantt(container);

  google.visualization.events.addOneTimeListener(chart, 'ready', function () {
    var observer = new MutationObserver(function (nodes) {
      Array.prototype.forEach.call(nodes, function(node) {
        if (node.addedNodes.length > 0) {
          Array.prototype.forEach.call(node.addedNodes, function(addedNode) {
            if ((addedNode.tagName === 'rect') && (addedNode.getAttribute('fill') === 'white')) {
              addedNode.setAttribute('fill', 'transparent');
              addedNode.setAttribute('stroke', 'transparent');
              Array.prototype.forEach.call(addedNode.parentNode.getElementsByTagName('text'), function(label) {
                label.setAttribute('fill', 'transparent');
              });
            }
          });
        }
      });
    });
    observer.observe(container, {
      childList: true,
      subtree: true
    });
  });

  chart.draw(data, options);

  function daysToMilliseconds(days) {
    return days * 24 * 60 * 60 * 1000;
  }
});

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

【讨论】：

是的@WhiteHat，它非常有用，我正在使用您的代码直接更改工具提示框内的文本，使用 label.textContent。
我还能知道将在 Array.prototype.forEach.call(addNode.parentNode.getElementsByTagName('text'), function (label) 中迭代的文本框的数量吗？
确定 --> addedNode.parentNode.getElementsByTagName('text').length