Google Charts: проблема с обработкой события клика - PullRequest
Новая
       10

Google Charts: проблема с обработкой события клика

0 голосов
/ 05 сентября 2018

У меня есть Google Chart, гистограмма, которую я недавно расширил, так что при выборе одной из полос откроется новая страница с данными, соответствующими этой полосе. Я использовал рекомендации для базовой интерактивности, используя selectHandler для обработки события.

Затем я решил сделать то же самое при нажатии на одну из меток, но я не смог заставить это работать. Я довольно внимательно посмотрел на документы и на этот старый вопрос (который, собственно, и является моим реальным вопросом: как сделать гиперссылку из меток диаграммы?) Для руководства. Я добавил слушатель событий щелчка и обработчик для этого, но моя диаграмма не отвечает на них.

Моя основная настройка: 

google.charts.load('current', {
  callback: drawChart,
  packages: ['bar']
});

var books = [
  ['2018-07', 5, 98.0],
  ['2018-08', 5, 100.0], // etc.
];
function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Date');
  data.addColumn('number', 'Number Purchased');
  data.addColumn('number', 'Price Paid');

  data.addRows(books);

  var options = {
    chart: {
      title: 'Book Purchases',
    },
    width: 800,
    height: 800,
    bars: 'horizontal',
    series: {
      0: {
        axis: 'purchased'
      },
      1: {
        axis: 'price_paid'
      }
    },
    axes: {
      x: {
        purchased: {
          side: 'top',
          label: 'Number Purchased'
        },
        price_paid: {
          label: 'Price Paid'
        }
      }
    }
  };

function selectHandler() {
  var selectedItem = chart.getSelection()[0];
  if (selectedItem) {
    var date = data.getValue(selectedItem.row, 0);
    var query_string = '?date=' + date;
    var path = window.location.pathname;
    path = path.replace("bookgraph", "");
    path = path + "search" + query_string;
    var newURL = window.location.protocol + "//" + window.location.host + path;
    window.open(newURL, '_blank');
  }
}

function clickHandler(e) {
  alert('The user has clicked on ' + e.targetID);
}

var chart = new google.charts.Bar(document.getElementById('bookgraph_material'));

google.visualization.events.addListener(chart, 'click', clickHandler);
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);

selectHandler работает нормально. Но я даже не могу заставить clickHandler показывать предупреждение (после того, как это сработает, я на самом деле закодирую остальное); очевидно, он никогда не срабатывает, независимо от того, где я нажимаю. Что я делаю не так?

Я настроил страницу скрипта JS для этого, чтобы поэкспериментировать с фреймом HTML, чтобы он действительно работал; это показывает рабочий выбор (хотя, конечно, 404) и нерабочий щелчок.

Спасибо.

1 Ответ

0 голосов
/ 05 сентября 2018

Событие 'click' не поддерживается Материал диаграммы,
см. номер вопроса: 2257 ...

и есть несколько опций конфигурации, которые также не поддерживаются,
см. номер вопроса: 2143 ...

Материал = google.charts.Bar - packages: ['bar']

Классический = google.visualization.BarChart - packages: ['corechart']

Обходным решением будет использование диаграммы Classic с опцией -> theme: 'material'

или зарегистрируйте собственное событие клика,
см. следующий рабочий фрагмент ... 

google.charts.load('current', {
  callback: drawChart,
  packages: ['bar']
});

var books = [
  ['2016-01', 3, 45.0],
  ['2016-02', 3, 56.0],
  ['2016-03', 1, 23.0],
  ['2016-04', 4, 60.0],
  ['2016-05', 1, 0],
  ['2016-06', 3, 14.0],
  ['2016-07', 4, 65.0],
  ['2016-08', 1, 15.0],
  ['2016-09', 13, 234.0],
  ['2016-10', 20, 834.0],
  ['2016-11', 5, 115.0],
  ['2016-12', 5, 58.0],
  ['2017-01', 6, 122.0],
  ['2017-02', 4, 84.0],
  ['2017-03', 1, 0],
  ['2017-04', 1, 30.0],
  ['2017-05', 2, 38.0],
  ['2017-06', 1, 11.0],
  ['2017-07', 0, 0],
  ['2017-08', 4, 88.0],
  ['2017-09', 5, 89.0],
  ['2017-10', 4, 73.0],
  ['2017-11', 5, 79.0],
  ['2017-12', 2, 37.0],
  ['2018-01', 1, 22.0],
  ['2018-02', 5, 98.0],
  ['2018-03', 5, 132.0],
  ['2018-04', 3, 56.0],
  ['2018-05', 14, 272.0],
  ['2018-06', 4, 88.0],
  ['2018-07', 5, 98.0],
  ['2018-08', 5, 100.0],
];

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Date');
  data.addColumn('number', 'Number Purchased');
  data.addColumn('number', 'Price Paid');

  data.addRows(books);

  var options = {
    chart: {
      title: 'Book Purchases',
    },
    width: 800,
    height: 800,
    bars: 'horizontal',
    series: {
      0: {
        axis: 'purchased'
      },
      1: {
        axis: 'price_paid'
      }
    },
    axes: {
      x: {
        purchased: {
          side: 'top',
          label: 'Number Purchased'
        },
        price_paid: {
          label: 'Price Paid'
        }
      }
    }
  };

  function selectHandler() {
    var selectedItem = chart.getSelection()[0];
    if (selectedItem) {
      var date = data.getValue(selectedItem.row, 0);
      var query_string = '?date=' + date;
      var path = window.location.pathname;
      path = path.replace("bookgraph", "");
      path = path + "search" + query_string;
      var newURL = window.location.protocol + "//" + window.location.host + path;
      window.open(newURL, '_blank');
    }
  }

  function clickHandler(e) {
    if (e.target.tagName === 'text') {
      console.log(e.target.textContent);
    }
  }

  var container = document.getElementById('bookgraph_material');
  var chart = new google.charts.Bar(container);

  google.visualization.events.addListener(chart, 'select', selectHandler);

  container.addEventListener('click', clickHandler);

  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="bookgraph_material"></div>
...