Question

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

1）通过在工具提示中添加按钮来编写onclick功能。但是，每当我点击按钮时，我都会收到以下错误＆＃34; Uncaught Reference - 函数未定义＆＃34;。我尝试将函数放在指令的几乎所有位置，但代码似乎没有把它拿起来。

工具提示中的HTML代码：

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

exportCSV函数：

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

2）在google图表中添加chart.setAction（）。但问题是，我在图表选项中有isHtml: True。当我尝试使用以下代码时，它似乎没有做任何事情。

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

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

我只需要在工具提示中捕获click事件。如果有人可以帮我解决这个问题，那就太好了。

谢谢！

Answer 1

我认为你只需要在全球范围内定义exportCSV，
见下面的例子......

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

＆＃13;

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");
}

＆＃13;

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

＆＃13;

谷歌图表HTML工具提示里面有javascript onclick事件吗？

1 个答案: