Question

我有一个谷歌图表，我在我的选项中将工具提示的类型设置为html，如下所示：

tooltip: { isHtml: true }

自定义工具提示以查看我想要的内容一直很容易，但将工具提示放在正确的位置却非常困难。经过大量的搜索，我在tooltip positioning上找到了这个答案，但似乎无法让它发挥作用。

用于创建图表和处理工具提示定位的我的javascript（除了选项）如下：

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    google.visualization.events.addListener(chart, 'ready', function () {
        var container = document.querySelector('#chart_div > div:last-child');
        function setPosition () {
            var tooltip = container.querySelector('div.google-visualization-tooltip');
            tooltip.style.top = 0;
            tooltip.style.left = '-47px';
        }
        if (typeof MutationObserver === 'function') {
            var observer = new MutationObserver(function (m) {
                for (var i = 0; i < m.length; i++) {
                    console.log("mutation: " + m[i].type);
                    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);
        }
    });
    chart.draw(dataTable, options);

我现在正在使用Google Chrome进行测试，如果我在typeof MutationObserver代码段中放入调试器，我会进入并设置观察者，但似乎永远不会被观察到，因为我甚至没有收到控制台消息。

非常感谢任何帮助。我的ID chart_div的html元素存在（并且图表在那里呈现），所以我不确定我缺少什么。

更改Google图表中工具提示的位置

0 个答案: