我正在尝试将自定义工具提示添加到气泡图中,以替换默认的工具提示。我已按照文档网站的说明进行操作(here https://developers.google.com/chart/interactive/docs/customizing_tooltip_content)添加一个新的string
列到数据表中,其中role: 'tooltip'
。但是,您可以在以下 JS 小提琴示例中看到,自定义工具提示内容不会呈现。该图表仍然显示默认的工具提示。
有人知道我还需要做什么才能显示此自定义工具提示内容吗?
http://jsfiddle.net/MPBmY/2/ http://jsfiddle.net/MPBmY/2/
我最终制作了一个运行良好的自定义工具提示弹出窗口。
假设气泡图的 div 定义如下:
<div id="bubble_chart_div"></div>
然后我使用了下面的 JavaScript。请注意,我遗漏了有关如何设置谷歌图表数据和加载谷歌图表包的内容。此代码仅显示如何获取自定义工具提示弹出窗口。
var mouseX;
var mouseY;
$(document).mousemove( function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
/*
*
*instantiate and render the chart to the screen
*
*/
var bubble_chart = new google.visualization.BubbleChart(document.getElementById('bubble_chart_div'));
bubble_chart.draw(customer_product_grid_data_table, options);
/*
* These functions handle the custom tooltip display
*/
function handler1(e){
var x = mouseX;
var y = mouseY - 130;
var a = 1;
var b = 2;
$('#custom_tooltip').html('<div>Value of A is'+a+' and value of B is'+b+'</div>').css({'top':y,'left':x}).fadeIn('slow');
}
function handler2(e){
$('#custom_tooltip').fadeOut('fast');
}
/*
* Attach the functions that handle the tool-tip pop-up
* handler1 is called when the mouse moves into the bubble, and handler 2 is called when mouse moves out of bubble
*/
google.visualization.events.addListener(bubble_chart, 'onmouseover', handler1);
google.visualization.events.addListener(bubble_chart, 'onmouseout', handler2);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)