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

Posted 2021-04-09

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

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

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

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

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

这让我得到一个对象，我从中获取与图表中的条相关联的日期。

可以通过同一事件更改h轴上的单击标签吗？

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

答案

你当然可以改变图表标签。

首先，我们必须将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>

以上是关于如何从h轴标签与谷歌条形图交互的主要内容，如果未能解决你的问题，请参考以下文章

如何在 matplotlib 条形图上旋转 x 轴刻度标签？尝试了几种方法，都没有奏效

是否有可能用谷歌图表创建两个侧面条形图？

X 轴条形图 Grafana 上的标签

如何旋转 xtick 标签条形图 plotly express？

Reporting Services 交互式条件排序

R语言使用ggpubr包的ggbarplot函数可视化水平偏差条形图（计算数值的z-score自定义填充色自定义条形边缘色自定义调色板条形图全局排序从小到大文本标签角度添加图例标签轴标签