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

Question

I have been trying to have a click event in the Google charts tooltip with chart option isHtml: true . So far, I have tried two ways to get this done but without success.

1) Writing an onclick function by adding a button in the tooltip. But, whenever I click on the button, I get the following error "Uncaught Reference - function not defined". I tried placing the function almost everywhere in the directive but the code doesn't seem to pick that up.

HTML code in the tooltip:

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

exportCSV function:

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

2) Adding chart.setAction() in the google charts. But the problem here is, I have isHtml: True in chart options. When I try using the following code it doesn't seem to do anything.

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

But, when I tried replacing function action with enabled in chart.setAction, the code returns the object when I click on the column or the Bar chart but not on the export data button in the tooltip.

All I need is to capture the click event in the tooltip. It would be great if someone could help me out on this issue.

Thanks!

Answer 1

I think you just need to define exportCSV in global scope,
see following example...

Also, without tooltip {trigger: 'selection'} in the chart options ,
I can't seem to click the tooltip before it disappears.
must click pie slice to see tooltip...

 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>