如何更改谷歌图表工具提示的弹出位置

Question

我目前有启用html的工具提示，也显示“子图”。 但是，如果可以将所有工具提示弹出到固定位置或者具有调整其相对位置的偏移量，那将是很好的。

这是我有一种工具提示的例子（空白数据）。 我想把它移到右边。 任何建议将不胜感激，包括任何javascript技巧。

Answer 1

虽然答案非常好，但现在有点过时了。 谷歌已实施CSS控制，因此无需破解JavaScript即可获得更大的灵活性。

.google-visualization-tooltip {  position:relative !important; top:0 !important;right:0 !important; z-index:+1;} 

将提供固定在图表底部的工具提示，实例： http ： //www.taxformcalculator.com/federal-budget/130000.html

或者你可以调整左边距......

.google-visualization-tooltip {  margin-left: 150px !important; z-index:+1;}

请注意，随着鼠标移动，使用z-index向前拉容器会减少（但不会完全停止）可见性闪烁。 闪烁的程度会因图表大小，调用等而异。就个人而言，我更喜欢修复工具提示，并按照第一个示例将其作为设计的一部分。 希望这有助于那些被JS黑客威胁的人（这很好，但实际上不再需要）。

Answer 2

工具提示位置设置为内联，因此您需要侦听工具提示的DOM插入并手动更改位置。 不推荐使用Mutation事件，因此如果可用，则使用MutationObserver （Chrome，Firefox，IE11），如果没有，则使用DOMNodeInserted事件处理程序（IE 9,10）。 这在IE8中不起作用。

google.visualization.events.addOneTimeListener(myChart, 'ready', function () {
    var container = document.querySelector('#myChartDiv > div:last-child');
    function setPosition () {
        var tooltip = container.querySelector('div.google-visualization-tooltip');
        tooltip.style.top = 0;
        tooltip.style.left = 0;
    }
    if (typeof MutationObserver === 'function') {
        var observer = new MutationObserver(function (m) {
            for (var i = 0; i < m.length; i++) {
                if (m[i].addedNodes.length) {
                    setPosition();
                    break; // once we find the added node, we shouldn't need to look any further
                }
            }
        });
        observer.observe(container, {
            childList: true
        });
    }
    else if (document.addEventListener) {
        container.addEventListener('DOMNodeInserted', setPosition);
    }
    else {
        container.attachEvent('onDOMNodeInserted', setPosition);
    }
});

MutationObserver应该没问题，但事件可能需要一些工作; 我没有测试它们。

Answer 3

我和Redshift有着或多或少相同的问题，一直试图相对于正在盘旋的节点移动工具提示。 使用asgallant的精彩答案我已经实现了他的代码如下。

我无法测试它是否适用于MutationObserver因为在我在Firefox，Chrome和IE11中进行测试时，它始终无法通过该测试并使用addEventListener。 文档表明它应该工作。

我不得不引入超时来实际操作样式，否则元素的左侧和顶部位置总是报告为0.我的假设是事件在添加节点时触发，但DOM还没有完全准备好。 这只是一个猜测，我不是百分之百满意这样实现它。

  var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
  google.visualization.events.addOneTimeListener(chart, 'ready', function () {
    var container = document.querySelector('#line_chart > div:last-child');
    function setPosition(e) {
      if (e && e.target) {
        var tooltip = $(e.target);
          setTimeout(function () {
            var left = parseFloat(tooltip.css('left')) - 49;
            var top = parseFloat(tooltip.css('top')) - 40;
            tooltip.css('left', left + 'px');
            tooltip.css('top', top + 'px');
            $(".google-visualization-tooltip").fadeIn(200);
          }, 1);
      }
      else {
        var tooltip = container.querySelector('.google-visualization-tooltip');
        var left = parseFloat(tooltip.style.left) - 49;
        var top = parseFloat(tooltip.style.top) - 40;
        tooltip.style.left = left + 'px';
        tooltip.style.top = top + 'px';
        $(".google-visualization-tooltip").fadeIn(200);
      }
    }
    if (typeof MutationObserver === 'function') {
      var observer = new MutationObserver(function (m) {
        if (m.length && m[0].addedNodes.length) {
          setPosition(m);
        }
      });
      observer.observe(container, {
        childList: true
      });
    }
    else if (document.addEventListener) {
      container.addEventListener('DOMNodeInserted', setPosition);
    }
    else {
      container.attachEvent('onDOMNodeInserted', setPosition);
    }
  });
  chart.draw(data, options);
}

编辑：更新以使MutationObserver在asgallant的评论之后工作。