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

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插入并手动更改位置.不推荐使用变异事件,因此请使用MutationObserverif(如果可用)(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应罚款,但事件可能需要一些工作; 我没有测试它们.