[英]Asgallant's Custom Tooltip Code for a Google Bubble Chart with Dashboard
I owe every bit of credit for the code below to Chris from this thread as well as r6danl99 and asgallant from this thread . 我欠贷款的每一点从下面克里斯代码这个线程以及r6danl99和asgallant从这个线程 。 So...I hope none of them mind me referencing their work in an attempt to figure out what I'm overlooking in their successes. 所以...我希望他们中间没人介意我参考他们的工作,以弄清我对他们的成功所忽略的事情。
To clarify, I'm attempting to create a bubble chart with custom "tooltips" along the lines of many answer-seekers here. 为澄清起见,我试图按照此处的许多寻求答案的方法,使用自定义“工具提示”创建气泡图。 And the code below works perfectly if I remove the event-handling bits, so I assume my problem has something to do with misplaced or poorly constructed calls to the handler functions...? 如果删除事件处理位,下面的代码也可以正常工作,因此我认为我的问题与对处理函数的错误放置或构造不正确的调用有关...?
My apologies for being unable to spot the miscue on my own, and I would appreciate any insight this forum's members can provide. 我很抱歉无法独自发现错误,对此论坛成员可以提供的任何见解,我将不胜感激。
All the best, 祝一切顺利,
Greg 格雷格
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {packages: ['corechart','controls']});
google.setOnLoadCallback(drawDashboard);
function drawDashboard() {
var query = new google.visualization.Query('https://docs.google.com...');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var writerFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'sportFilter_div',
options: {
filterColumnIndex: 3,
ui: {
labelStacking: 'vertical',
selectedValuesLayout: 'belowWrapping',
allowTyping:true,
caption: 'Choose sport...',
}
}
});
var rBubbleChart = new google.visualization.ChartWrapper({
chartType: 'BubbleChart',
containerId: 'rBubble_div',
options: {
//title: 'Sport',
height: 600,
width: 800,
chartArea: {left: '10%', top: '5%', width: '85%', height: '85%'},
backgroundColor: 'transparent',
hAxis: {minValue: -100, maxValue: 600000, logScale: 'true', ticks:[50000,100000,500000], format: '#,###', baselineColor: '#BDBDBD', gridlines: {count: 15, color: 'transparent'}, title: 'Type', titleTextStyle: {fontSize: 10,color: '#585858'}, textStyle: {fontSize: 10,color: '#585858'}},
vAxis: {minValue: -20, maxValue: 300, direction: -1, format: '#,###', ticks: [1,25,50,75,100,125,150,175,200,225,250,275,300], baseline: 300, baselineColor: '#BDBDBD', gridlines: {count: 20, color: 'transparent'}, title: 'Rank', titleTextStyle: {fontSize: 10,color: '#585858'}, textStyle: {fontSize: 10,color: '#585858'}},
bubble: {opacity: 0.4, stroke: 'transparent', textStyle: {fontSize: 8, color: 'black', auraColor: 'none'}, sizeAxis: {minSize: 1, minValue: 1, maxSize: 10}},
tooltip: {trigger: 'none'},
legend: {position: 'none'},
animation: {duration: 0, easing: 'out'}
},
view: {columns: [2, 5, 1, 3, 6]}
});
var mouseX;
var mouseY;
$(document).mousemove(function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
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');
}
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
dashboard.bind(writerFilter, rBubbleChart);
google.visualization.events.addListener(dashboard, 'onmouseover', handler1);
google.visualization.events.addListener(dashboard, 'onmouseout', handler2);
dashboard.draw(data);
}
</script>
</head>
<body>
<div id="dashboard_div"></div>
<div id="sportFilter_div"></div>
<div id="rBubble_div"></div>
<div id="custom_tooltip"></div>
</body>
</html>
Well, handling events for ChartWrappers are a bit different. 好吧,为ChartWrappers处理事件有些不同。 You need to apply the event to the chart of the wrapper, not the wrapper itself. 您需要将事件应用于包装器的图表,而不是包装器本身。 You can do this with wrapper.getChart()
. 您可以使用wrapper.getChart()
做到这一点。 Also, just in case its better to start listening for those events after dashboard is ready. 同样,以防万一,在仪表盘准备就绪后最好开始侦听这些事件。 Here is working code: 这是工作代码:
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
dashboard.bind(writerFilter, rBubbleChart);
google.visualization.events.addListener(dashboard, 'ready', function(){
google.visualization.events.addListener(rBubbleChart.getChart(), 'onmouseover', handler1);
google.visualization.events.addListener(rBubbleChart.getChart(), 'onmouseout', handler2);
});
dashboard.draw(data);
And working fiddle: http://jsfiddle.net/mm3981xq/1/ 和工作提琴: http : //jsfiddle.net/mm3981xq/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.