Создайте интерактивный элемент в линейной диаграмме визуализации Google - PullRequest
2 голосов
/ 11 июля 2011

Можно ли прикрепить метод onclick к элементам линейной диаграммы Google Visualization?Например, если пользователь нажимает на точку на графике, я хочу отправить пользователя на страницу с более подробной информацией.Я прошел всю документацию и не могу найти пример того, как это сделать.

Я вижу, что есть методы для событий (из документации ), но без четкого примера это не имеет особого смысла.

Спасибо!

Ответы [ 2 ]

7 голосов
/ 13 июля 2011

Вы можете сделать это, используя событие «select», которое будет запускаться каждый раз, когда пользователь нажимает на точку на линейном графике.Я включил рабочий пример ниже, включая перенаправление с парой значений.На игровой площадке Google Code есть хороший пример использования обработчиков событий для таблицы - для большинства визуализаций можно использовать один и тот же тип функциональности.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1.1', {packages: ['barchart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Create and populate the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addRows(4);
        data.setValue(0, 0, '2004');
        data.setValue(0, 1, 1000);
        data.setValue(0, 2, 400);
        data.setValue(1, 0, '2005');
        data.setValue(1, 1, 1170);
        data.setValue(1, 2, 460);
        data.setValue(2, 0, '2006');
        data.setValue(2, 1, 660);
        data.setValue(2, 2, 1120);
        data.setValue(3, 0, '2007');
        data.setValue(3, 1, 1030);
        data.setValue(3, 2, 540);

        chart = new google.visualization.LineChart(document.getElementById('visualization'));
        chart.draw(data, {width: 400, height: 240, title: 'Company Performance',
                          vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
                         });

        // a click handler which grabs some values then redirects the page
        google.visualization.events.addListener(chart, 'select', function() {
          // grab a few details before redirecting
          var selection = chart.getSelection();
          var row = selection[0].row;
          var col = selection[0].column;
          var year = data.getValue(row, 0);
          location.href = 'http://www.google.com?row=' + row + '&col=' + col + '&year=' + year;
        });

      }
      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body>
    <div id="visualization" style="width: 600px; height: 400px;"></div>
  </body>
</html>
1 голос
/ 09 сентября 2012

getSelection (). Столбец не работает, он возвращает «неизвестное» значение.Эта проблема была опубликована на странице отчетов об ошибках API визуализации Google .

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