Как добавить событие onclick в Gauge of Google Chart? - PullRequest
Новая
       2

Как добавить событие onclick в Gauge of Google Chart?

2 голосов
/ 03 ноября 2011

Мне нужно обработать событие onclick над Gauge.В документации по Google Chart я не нашел пример регистрации событий через Gauges.

Я попробовал следующее: 

<html>
    <head>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("visualization", "1", {packages:["corechart","gauge"]});
            google.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'LABEL');
                data.addColumn('number', 'TOTAL');
                data.addRows(1);
                data.setValue(0, 0, 'Speed');
                data.setValue(0, 1, 240);
                var gaugeOptions = {min: 0, max: 280, yellowFrom: 200, yellowTo: 250, title: 'Company Performance', redFrom: 250, redTo: 280, minorTicks: 5};
                var gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));
                gauge.draw(data, gaugeOptions);
                google.visualization.events.addListener(gauge, 'select', function() {
                    alert("Here");
                });
            }
        </script>
    </head>
    <body>
        <div id="gauge_div"></div>
    </body>
</html>

Также я попытался добавить событие onclick с помощью JQuery.для div "gauge_div", но это работает только в том случае, если я нажму на границу div, а не на шкалу.

Ответы [ 4 ]

1 голос
/ 08 августа 2014

Используя jQuery, можно использовать селектор nth-child как-то так ... 

$( "#gauge_div td:nth-child(2)" ).click(function() {
    var tData = data.getValue(1,0);
    alert( "Handler for .click() called."+ tDate);
});

Предполагая, что данные вашего датчика хранятся в переменной, называемой «data», которую вы бы назваливторым дочерним элементом и правильной строкой данных будет строка «1», так как она будет начинаться с 0.

, т. е. 0 = 1, 1 = 2, 2 = 3, 3 = 4, ...

1 голос
/ 12 декабря 2011

Датчик не имеет событий, которые он вызывает.Диаграмма отображается в iframe, который также не имеет события click в локальном домене, а скорее в window.document.body из iframe.Решение, которое я использовал, состояло в том, чтобы создать пустой элемент DIV, расположенный относительно верхней части датчика, и зарегистрировать событие щелчка для этого. 

<html>
    <head>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("visualization", "1", {packages:["corechart","gauge"]});
            google.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'LABEL');
                data.addColumn('number', 'TOTAL');
                data.addRows(1);
                data.setValue(0, 0, 'Speed');
                data.setValue(0, 1, 240);
                var gaugeOptions = {min: 0, max: 280, yellowFrom: 200, yellowTo: 250, title: 'Company Performance', redFrom: 250, redTo: 280, minorTicks: 5};
                var gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));
                gauge.draw(data, gaugeOptions);
                google.visualization.events.addListener(gauge, 'select', function() {
                    alert("Here");
                });
            }
        </script>
    </head>
    <body style="position:relative;">
        <div id="gauge_div"></div>
        <div id="gauge_div_clickable" style="position:absolute;z-index:2;top:- 120px;width:120px;height:120px;" onclick="alert('here');">
    </body>
</html>
0 голосов
/ 15 июля 2016

Я начал с ответа CrandellWS, но в итоге получил следующее, что еще проще: 

$('#gauge_div td').click(function() {
   alert(data.getValue(this.cellIndex,0));
});
0 голосов
/ 07 августа 2012

Чтобы получить интерактивный датчик, добавьте этот javascript: 

$('#gauge_div').find('iframe')).each(function(elt, idx) {
   $(elt).contents().find('body').click(function (event) {
      // gauge.getSelection() does not exists so we emulate its result:
      var selection = [{'row': idx}];
      common_onclick_callback(selection);
   });
});

Какие функции:

  • отдельный датчик onclick (работает с несколькими датчиками и идентифицирует их)
  • образец быстрой gauge.getSelection() эмуляции результата, которая может быть полезна, если вы хотите повторно использовать обратный вызов onclick, который вы уже написали для других типов диаграмм Google.

Это работает, потому что:

  • каждый iframe просматривается, чтобы перехватить событие в их body (в противном случае onclick событие не вызывается)
  • каждый onclick обратный вызов получает соответствующий индекс idx, связанный с их положением в HTML.

Этот образец использует:

  • jquery, который сопоставлен с $, и предоставляет селектор и find, contents методы
  • подчеркивание, которое отображается на _, и предоставляет each средство

Но оба они необязательны, но удобны.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...