Question

我对以下代码感谢this thread以及来自this thread的r6danl99和asgallant。所以......我希望他们都不介意我参考他们的工作，试图找出我在成功中忽略的东西。

为了澄清，我正在尝试创建一个带有自定义“工具提示”的气泡图，这里有许多求职者。如果我删除事件处理位，下面的代码可以很好地工作，所以我认为我的问题与处理函数的错位或构造不正确的调用有关...？

我为自己无法发现错误而道歉，我很感激这个论坛成员可以提供的任何见解。

一切顺利，

格雷格

<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>

Answer 1

好吧，ChartWrappers的处理事件有点不同。您需要将事件应用于包装器的图表，而不是包装器本身。您可以使用wrapper.getChart()执行此操作。此外，万一最好在仪表板准备好后开始监听这些事件。这是工作代码：

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);

工作小提琴：http://jsfiddle.net/mm3981xq/1/

Asgallant的带有仪表板的Google气泡图的自定义工具提示代码

1 个答案: