Google Charts：处理“点击”事件时遇到问题

Question

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

然后我决定在点击其中一个标签时做同样的事情，但我无法让它工作。我仔细查看了文档，并在this older question（事实上，这是我的实际问题：如何从图表的标签中制作超链接？）作为指导。我为点击事件添加了一个监听器，并为此添加了一个处理程序，但我的图表没有响应它们。

我的基本设置是：

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显示警告（在此工作之后，我将实际编写其余的代码）;无论我点击哪里，它显然都不会被解雇。我究竟做错了什么？

我为此设置了一个JS Fiddle page，用html框架进行试验，这样它才能真正起作用;这显示了工作选择（当然是404）和非工作点击。

谢谢。