Question

我将Google条形图用作导航界面，以通过单击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属性。
单击标签后，颜色将变为红色。

请参阅以下工作片段...

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>

如何从H轴标签与Google条形图进行交互

1 个答案: