如何更改谷歌图表工具提示的弹出位置 [英] How to change pop-up location of google charts tooltip

问题描述

我目前拥有支持HTML的工具提示，它也显示子图。然而，如果有可能让所有工具提示在固定位置弹出或者有一个调整其相对位置的偏移量，那将会很好。

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

解决方案

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

  google.visualization.events.addOneTimeListener（myChart，'ready'，function（）{
 var container = document.querySelector（'＃myChartDiv> div：last-child'）; 
函数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  if（m [i] .addedNodes.length） {
 setPosition（）; 
 break; //一旦找到添加的节点，我们就不需要再看
} 
} 
}）; 
 observer.observe（container，{
 childList：true 
}）; 
} 
 else if（document .addEventListener）{
 container.addEventListener（'DOMNodeInserted'，setPosition）; 
} 
 else {
 container.attachEvent（'onDOMNodeInserted'，setPosition）; 
} 
}）; 
  

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

I currently have html enabled tooltips that also display "sub graphs". However, it would be nice if it was possible to have all tooltips pop up in a fixed location or have an offset that adjusted their relative poition.

This is an example of the kind of tooltip that I have (blank data). I'd like to move it to the right. Any suggestions would be appreciated, including any javascript trickery.

解决方案

The tooltip position is set inline, so you need to listen for DOM insertion of the tooltip and change the position manually. Mutation events are deprecated, so use a MutationObserver if it is available (Chrome, Firefox, IE11) and a DOMNodeInserted event handler if not (IE 9, 10). This will not work in 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);
    }
});

The MutationObserver should be fine, but the events may need some work; I didn't test them.

这篇关于如何更改谷歌图表工具提示的弹出位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！