как взаимодействовать с гистограммой Google по меткам оси H - PullRequest
Новая
       11

как взаимодействовать с гистограммой Google по меткам оси H

4 голосов
/ 21 апреля 2019

Я использую гистограммы Google в качестве навигационного интерфейса для отображения записей с диапазоном дат, щелкая метки по оси h, которые в моем случае показывают месяц и год.

Проблема в том, что интерактивности нет, например, курсор меняется при наведении на даты на оси h.

Я получаю доступ к метке оси h, используя: 

google.visualization.events.addListener(chart, 'click', function (e) {

var bar_date = e.targetID.match(/hAxis#0#label#(\d+)/);

Это дает мне объект, из которого я получаю дату, связанную с гистограммой на графике.

Можно ли изменить метку, на которую нажали на оси h, с помощью того же события?

обновление: скрипка с рабочим примером согласно принятому ответу

1 Ответ

2 голосов
/ 24 апреля 2019

вы, безусловно, можете изменить метки диаграммы.

Во-первых, мы должны отличать метки оси h от остальных меток диаграммы.
это можно сделать с помощью атрибута элемента <text>.
здесь используется атрибут text-anchor.
при нажатии на метку цвет меняется на красный.

см. Следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.arrayToDataTable([
    ['date', 'value'],
    [new Date(2019, 0), 2924],
    [new Date(2019, 1), 2075],
    [new Date(2019, 2), 2516],
  ]);

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

  google.visualization.events.addListener(chart, 'click', function (e) {
    var bar_date = e.targetID.match(/hAxis#0#label#(\d+)/);
    var labels = container.getElementsByTagName('text');
    var bar_labels = [];

    // get chart labels
    Array.prototype.forEach.call(labels, function(label) {
      // find h-axis labels
      if (label.getAttribute('text-anchor') === 'middle') {
        bar_labels.push(label);
      }
    });

    // find label clicked
    if (bar_date) {
      bar_labels[bar_date[1]].setAttribute('fill', '#ff0000');
    }
  });

  chart.draw(data, {
    hAxis: {
      format: 'MM/yy',
      ticks: data.getDistinctValues(0)
    }
  });
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

РЕДАКТИРОВАТЬ

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable({
    "cols": [
      {
        "id": "Month",
        "label": "Month",
        "type": "string"
      },
      {
        "id": "y0",
        "label": "y0",
        "type": "number"
      },
      {
        "id": "y0",
        "label": "y0",
        "type": "number"
      },
      {
        "id": "y0",
        "label": "y0",
        "type": "number"
      }
    ],
    "rows": [{"c": [{"v": "Sep 2014"}, {"v": 100}, {"v": 0}, {"v": 0}]}]
  });

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

  google.visualization.events.addListener(chart, 'click', function (e) {
    var bar_date = e.targetID.match(/hAxis#0#label#(\d+)/);
    var labels = container.getElementsByTagName('text');
    var bar_labels = [];

    // get chart labels
    Array.prototype.forEach.call(labels, function(label) {
      // find h-axis labels
      if (label.getAttribute('text-anchor') === 'middle') {
        bar_labels.push(label);
      }
    });

    // find label clicked
    if (bar_date) {
      bar_labels[bar_date[1]].setAttribute('fill', '#ff0000');
    }
  });

  chart.draw(data, {
    hAxis: {
      format: 'MM/yy',
      ticks: data.getDistinctValues(0)
    }
  });
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...