我目前拥有启用了HTML的工具提示,还可以显示"子图形"。 但是,如果所有工具提示都可以弹出到固定位置或具有相对位置调整的偏移量,那就太好了。
这是我拥有的工具提示(空数据)的示例。 我想把它移到右边。 希望能够提供任何建议,包括任何JavaScript技巧。
我目前拥有启用了HTML的工具提示,还可以显示"子图形"。 但是,如果所有工具提示都可以弹出到固定位置或具有相对位置调整的偏移量,那就太好了。
这是我拥有的工具提示(空数据)的示例。 我想把它移到右边。 希望能够提供任何建议,包括任何JavaScript技巧。
虽然答案很好,但现在有点过时了。Google已经实现了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 hack所吓倒的人有所帮助(这很好,但实际上不再必要)。
提示框位置是内联设置的,因此需要监听提示框的DOM插入并手动更改位置。变异事件已弃用,因此如果有可用的MutationObserver
(Chrome、Firefox、IE11),则使用它,如果没有(IE9、10),则使用DOMNodeInserted
事件处理程序。这在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
应该没问题,但是事件可能需要一些调整;我没有测试过它们。我和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);
}
编辑:根据asgallant的评论更新,以使MutationObserver
正常工作。
typeof MutationObserver === 'function'
。 - asgallantMutationObserver
对象的工作方式与事件不同(请参阅MDN文档);可能会观察到多个变化,因此您需要解析整个数组而不是检查第一个元素。我将更新我的答案,并提供代码来完成这个任务。 - asgallant