如何从 h 轴标签与谷歌条形图交互

Question

我使用谷歌条形图作为导航界面，通过单击在我的例子中显示月份和年份的 h 轴标签来显示具有日期范围的记录。

问题在于没有交互性，例如当您在 h 轴上滚动日期时光标会发生变化。

我正在使用以下方法访问 h 轴标签：

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

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

这给了我一个对象，我从中获取与图表中的条相关的日期。

可以通过同一个事件来改变h轴上点击的标签吗？

更新：fiddle 根据接受的答案提供工作示例

Answer 1

您当然可以更改图表标签。

首先，我们必须将 h 轴标签与其他图表标签区分开来。
这可以通过使用 <text> 元素上的属性来完成。
这里使用了text-anchor 属性。
单击标签时，颜色变为红色。

请参阅以下工作 sn-p...

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>

---

编辑

数据表的结构应该没什么区别，
请参阅以下工作 sn-p...

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>