Захват события, когда пользователь нажимает на оси х на диаграммах Google - PullRequest
Новая
       14

Захват события, когда пользователь нажимает на оси х на диаграммах Google

1 голос
/ 02 июля 2019

Я использую Angular Google Charts .Я работаю над требованием, когда мне нужно изменить формат значений оси X, когда пользователь нажимает на них.Как абсолютное значение <=> Процентное значение.Можно ли каким-то образом зафиксировать событие, когда пользователь щелкает в любом месте оси x, а не в других частях диаграммы?

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

1 Ответ

0 голосов
/ 02 июля 2019

зависит от используемого графика,
большинство диаграмм в пакете 'corechart' имеют событие 'click'.
проверьте раздел events в документации для конкретного графика.

Событие 'click' получит аргумент с нажатием targetID элемента диаграммы.
при щелчке по метке оси X targetID будет иметь следующую форму. 

hAxis#0#label#0

где первый 0 - это индекс оси (всегда ноль, когда есть только одна ось x)
а второй 0 - индекс метки, по которой щелкнули

, поэтому в следующем значении будет указана вторая метка оси x на первой оси x. 

hAxis#0#label#1

как таковой, мы можем использовать выражение регулярного выражения, чтобы определить, была ли нажата какая-либо метка оси x. 

/hAxis#(\d+)#label#(\d+)/

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'y0');

  for (var i = 0; i <= 100; i++) {
    var direction = (i % 2 === 0) ? 1 : -1;
    data.addRow([i, (2 * i * direction)]);
  }

  var options = {
    curveType: 'function'
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

  google.visualization.events.addListener(chart, 'click', function(e) {
    var match = e.targetID.match(/hAxis#(\d+)#label#(\d+)/);
    if ((match !== null) && (match.length > 0)) {
      console.log('x-axis label -->', e.targetID);
    } else {
      console.log('not x-axis label -->', e.targetID);
    }
  });

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