Javascript 如何更改google图表工具提示的弹出位置

我目前有支持html的工具提示，也显示“子图”。不过，如果可以在固定位置弹出所有工具提示，或者有一个调整其相对位置的偏移量，那就太好了

---

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

工具提示位置是内联设置的，因此您需要侦听工具提示的DOM插入并手动更改位置。突变事件是不推荐使用的，因此如果可用，请使用

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);
    }
});

google.visualization.events.addOneTimeListener（myChart'ready'，function（）{
var container=document.querySelector（'#myChartDiv>div:last child'）；
函数设置位置（）{
var tooltip=container.querySelector（'div.google-visualization-tooltip'）；
tooltip.style.top=0；
tooltip.style.left=0；
}
if（变异观察者的类型=='function'）{
var观察者=新的变异观察者（函数（m）{
对于（变量i=0；i

---

MutationObserver

应该可以，但是事件可能需要一些工作；我没有对它们进行测试。

我的问题与红移差不多，因为我一直在尝试相对于悬停的节点移动工具提示。使用asgallant奇妙的回答，我实现了他的代码，如下所示

我无法测试这是否适用于

MutationObserver

，因为在Firefox、Chrome和IE11中进行测试时，它总是无法通过测试，并使用addEventListener。不过，医生们建议它应该能起作用

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

  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);
}

---

编辑：更新以获得asgallant评论后的

MutationObserver

工作。

虽然答案很好，但现在有点过时了。谷歌已经实现了CSS控制，因此在不需要破解JavaScript的情况下具有更大的灵活性

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

将在图表底部提供固定的工具提示，例如：

或者你可以调整左边距

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

---

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

有帮助吗？不，这只是修改了工具提示中的html。与它实际弹出的位置无关。我们实际上只是实现了稍微控制工具提示方向的功能。它将在下一个版本（v40）中发布，但我不能告诉你什么时候发布，因为谷歌没有预先发布。我会一直关注google visualization api发布的邮件列表。应该在几天/几周后公布。此外，@asgallant的回答往往是可靠的。看看下面…@asgallant回答得很好，尽管根据我在下面添加的答案，我在实现它时遇到了一些困难。很好，现在它工作得很好。同样感谢@AlanBuchanan的回答。我无法让它工作。从未执行MutationObserver回调。我想它应该在用户悬停在显示工具提示的图形上时执行。这是我的错误-它应该是

typeof MutationObserver===“function”

@asgallant谢谢，现在可以了，我已经相应地更新了我的答案。@asgallant，我已经实现了你两项工作的结合，现在有了一个部分有效的解决方案。我的问题是工具提示现在确实会移动，但只有当鼠标离开一个点然后转到另一个点时才会移动。由于我的点彼此非常接近，经常发生的情况是，当一个工具提示显示时，我移动到另一个点（不消失），工具提示位置重置为默认位置。关于可能发生的事情，你们有什么建议吗？无论如何，感谢您的努力。@RedShift您是否能够使用Firebug（或只是一个警报框）在setPosition（）函数中设置断点，以检查当光标从一个点移动到另一个点时是否触发事件。在这种情况下，代码可能会移动tooltip元素，而不是删除它并将其重新添加到DOM中。我将在下次工作时（2天）检查它并与您联系。谢谢