Пользовательский код всплывающей подсказки Asgallant для пузырьковой диаграммы Google с информационной панелью

Я полностью обязан Крису за приведенный ниже код из этой темы как а также 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>

javascript google-visualization tooltip bubble-chart
person Greg    schedule 28.10.2014    source источник
comment
Какую ошибку вы получаете? А не могли бы вы привести пример набора данных?   -  person juvian    schedule 28.10.2014
comment
Я не получаю явного сообщения об ошибке — всплывающие подсказки просто не появляются. Вот пример: jsfiddle.net/mm3981xq   -  person Greg    schedule 29.10.2014

Ответы (1)


arrow_upward
0
arrow_downward

Что ж, обработка событий для 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/

person juvian    schedule 28.10.2014
comment
Большое спасибо за понимание и код, Ювиан. Он отлично работает в скрипке. Самое ужасное, что я не могу загрузить его ни в одном браузере, который я пытаюсь использовать, т.е. Сафари, Хром, Фаерфокс. Тем временем я продолжу возиться, и еще раз спасибо за вашу помощь! - person Greg; 29.10.2014
comment
Последний вопрос, Джувиан. Знаете ли вы, почему всплывающие подсказки в вашем примере скрипки появляются в другом месте, чем в примере asgallant—jsfiddle .net/asgallant/erp5a/1 — хотя код обработчика идентичен? - person Greg; 29.10.2014
comment
@Greg Вам просто не хватает свойства position : absolute css в customTooltip;). Что ж, попробуйте добавить код внутри готового документа на всякий случай, у вас получилось? - person juvian; 29.10.2014
comment
Вы правы в том, что я упустил из виду как свойство позиции, так и обработчик готовности документа. Оба сделали свое дело! - person Greg; 30.10.2014