带有javascript onclick事件的Google Charts HTML工具提示？

Question

我一直试图在 Google 图表工具提示中使用图表选项 isHtml: true 进行点击事件。到目前为止，我已经尝试了两种方法来完成这项工作，但都没有成功。

1) 通过在工具提示中添加按钮来编写 onclick 函数。但是，每当我单击该按钮时，我都会收到以下错误“未捕获的引用 - 未定义函数”。我尝试在指令中几乎所有地方都放置该函数，但代码似乎没有找到它。

工具提示中的 HTML 代码：

'<h5 style="padding-left:.66em;" id="export" href="#" onclick="exportCSV()">Export CSV</h5>

导出CSV函数：

var exportCSV = function(){
    console.log("Function Triggered");
}

2) 在谷歌图表中添加 chart.setAction()。但这里的问题是，我在图表选项中有isHtml: True。当我尝试使用以下代码时，它似乎什么也没做。

chart.setAction({ id: 'export', text: 'Export CSV', action: function() { selection = chart.getSelection(); console.log(selection); } });

但是，当我尝试在 chart.setAction 中将函数 action 替换为 enabled 时，当我单击列或条形图而不是工具提示中的导出数据按钮时，代码会返回对象。

我只需要在工具提示中捕获点击事件。如果有人能在这个问题上帮助我，那就太好了。

谢谢！

Answer 1

我认为您只需要在全局范围内定义 exportCSV，
看下面的例子......

另外，图表中没有tooltip {trigger: 'selection'} options，
在工具提示消失之前，我似乎无法单击它。
必须点击饼图才能看到工具提示...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Genre', 'Percentage of my books', {role: 'tooltip', type: 'string', p: {html:true}}],
      ['Science Fiction', 217, '<h5 style="padding-left:.66em;" id="export" href="#" onclick="exportCSV()">Export CSV</h5>'],
      ['General Science', 203, '<h5 style="padding-left:.66em;" id="export" href="#" onclick="exportCSV()">Export CSV</h5>'],
      ['Computer Science', 175, '<h5 style="padding-left:.66em;" id="export" href="#" onclick="exportCSV()">Export CSV</h5>'],
      ['History', 155, '<h5 style="padding-left:.66em;" id="export" href="#" onclick="exportCSV()">Export CSV</h5>'],
      ['Economics/Political Science', 98, '<h5 style="padding-left:.66em;" id="export" href="#" onclick="exportCSV()">Export CSV</h5>'],
      ['General Fiction', 72, '<h5 style="padding-left:.66em;" id="export" href="#" onclick="exportCSV()">Export CSV</h5>'],
      ['Fantasy', 51, '<h5 style="padding-left:.66em;" id="export" href="#" onclick="exportCSV()">Export CSV</h5>'],
      ['Law', 29, '<h5 style="padding-left:.66em;" id="export" href="#" onclick="exportCSV()">Export CSV</h5>']
    ]);

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

    var options = {
      height: 400,
      tooltip: {
        isHtml: true,
        trigger: 'selection'
      },
      width: 600
    };

    chart.draw(data, options);
  },
  packages: ['corechart']
});

var exportCSV = function(){
  alert("Function Triggered");
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>