Question

我目前使用支持html的工具提示，同时显示＆＃34;子图＆＃34;。但是，如果可以将所有工具提示弹出固定位置或者具有调整其相对位置的偏移量，那将是很好的。

enter image description here

这是我有一种工具提示的例子（空白数据）。我想把它移到右边。任何建议将不胜感激，包括任何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插入并手动更改位置。不推荐使用变异事件，因此如果可用，则使用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的评论工作。

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

3 个答案: