針對帶有儀表板的Google氣泡圖的Asgallant的自定義工具提示代碼

Question

我欠貸款的每一點從下面克里斯代碼這個線程以及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/

針對帶有儀表板的Google氣泡圖的Asgallant的自定義工具提示代碼

問題描述

1 個解決方案

解決方案1
0 已采納 2014-10-28 23:48:58

針對帶有儀表板的Google氣泡圖的Asgallant的自定義工具提示代碼

問題描述

1 個解決方案

解決方案1 0 已采納 2014-10-28 23:48:58

解決方案1
0 已采納 2014-10-28 23:48:58