Javascript 谷歌图表：问题处理a'；单击'；事件

我有一个谷歌图表，一个条形图，我最近扩展了它，选择其中一个条形图将打开一个新页面，显示与该条形图对应的数据。我使用了基本交互的指导原则，使用selectHandler来处理事件

然后我决定在点击其中一个标签时做同样的事情，但我一直无法让它工作。我非常仔细地查看了这些文档，并参考了（实际上，这是我的实际问题：如何利用图表的标签制作超链接？）。我为单击事件添加了一个侦听器和一个处理程序，但我的图表没有响应它们

我的基本设置是：

google.charts.load('current', {
  callback: drawChart,
  packages: ['bar']
});

var books = [
  ['2018-07', 5, 98.0],
  ['2018-08', 5, 100.0], // etc.
];
function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Date');
  data.addColumn('number', 'Number Purchased');
  data.addColumn('number', 'Price Paid');

  data.addRows(books);

  var options = {
    chart: {
      title: 'Book Purchases',
    },
    width: 800,
    height: 800,
    bars: 'horizontal',
    series: {
      0: {
        axis: 'purchased'
      },
      1: {
        axis: 'price_paid'
      }
    },
    axes: {
      x: {
        purchased: {
          side: 'top',
          label: 'Number Purchased'
        },
        price_paid: {
          label: 'Price Paid'
        }
      }
    }
  };

function selectHandler() {
  var selectedItem = chart.getSelection()[0];
  if (selectedItem) {
    var date = data.getValue(selectedItem.row, 0);
    var query_string = '?date=' + date;
    var path = window.location.pathname;
    path = path.replace("bookgraph", "");
    path = path + "search" + query_string;
    var newURL = window.location.protocol + "//" + window.location.host + path;
    window.open(newURL, '_blank');
  }
}

function clickHandler(e) {
  alert('The user has clicked on ' + e.targetID);
}

var chart = new google.charts.Bar(document.getElementById('bookgraph_material'));

google.visualization.events.addListener(chart, 'click', clickHandler);
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);

selectHandler工作正常。但我甚至无法让clickHandler显示警报（在这项工作完成后，我将实际编写其余部分的代码）；不管我在哪里点击，它显然从未被激活过。我做错了什么

我为此设置了一个HTML框架，以供试验，使其实际工作；这显示了工作选择（当然是404）和非工作单击

---

谢谢。

物料图表不支持

'click'

事件，
看

还有一些配置选项也不受支持，
看

Material=

google.charts.Bar

--

packages:['Bar']

Classic=

google.visualization.BarChart

--

软件包：['corechart']

---

解决方法之一是使用带有选项-->

主题的经典图表：“材质”

或者注册您自己的点击事件，
请参阅以下工作片段

google.charts.load（'current'{
回调：图纸，
套餐：['bar']
});
var账簿=[
['2016-01', 3, 45.0],
['2016-02', 3, 56.0],
['2016-03', 1, 23.0],
['2016-04', 4, 60.0],
['2016-05', 1, 0],
['2016-06', 3, 14.0],
['2016-07', 4, 65.0],
['2016-08', 1, 15.0],
['2016-09', 13, 234.0],
['2016-10', 20, 834.0],
['2016-11', 5, 115.0],
['2016-12', 5, 58.0],
['2017-01', 6, 122.0],
['2017-02', 4, 84.0],
['2017-03', 1, 0],
['2017-04', 1, 30.0],
['2017-05', 2, 38.0],
['2017-06', 1, 11.0],
['2017-07', 0, 0],
['2017-08', 4, 88.0],
['2017-09', 5, 89.0],
['2017-10', 4, 73.0],
['2017-11', 5, 79.0],
['2017-12', 2, 37.0],
['2018-01', 1, 22.0],
['2018-02', 5, 98.0],
['2018-03', 5, 132.0],
['2018-04', 3, 56.0],
['2018-05', 14, 272.0],
['2018-06', 4, 88.0],
['2018-07', 5, 98.0],
['2018-08', 5, 100.0],
];
函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Date'）；
data.addColumn（'number'，'number Purchased'）；
data.addColumn（'number'，'Price Paid'）；
数据。添加行（书籍）；
变量选项={
图表：{
标题:"购书",，
},
宽度：800，
身高：800，
酒吧：“水平”，
系列：{
0: {
axis:“已购买”
},
1: {
axis:“支付的价格”
}
},
轴线：{
x:{
购买：{
边：'顶'，
标签：“购买数量”
},
支付的价格：{
标签：“已付价格”
}
}
}
};
函数selectHandler（）{
var selectedItem=chart.getSelection（）[0]；
如果（选择编辑项）{
var date=data.getValue（selectedItem.row，0）；
变量查询_字符串='？日期='+日期；
var path=window.location.pathname；
path=path.replace（“bookgraph”，“bookgraph”）；
路径=路径+搜索+查询字符串；
var newURL=window.location.protocol+“/”+window.location.host+path；
window.open（newURL，'u blank'）；
}
}
函数clickHandler（e）{
如果（e.target.tagName=='text'）{
console.log（e.target.textContent）；
}
}
var container=document.getElementById（'bookgraph_material'）；
var chart=新的google.charts.Bar（容器）；
google.visualization.events.addListener（图表'select'，selectHandler）；
container.addEventListener（'click'，clickHandler）；
图表绘制（数据、选项）；
}