Google Charts内部のjavascript onclickイベントを使用したHTMLツールチップですか？

Question

グラフのオプションisHtml: trueを使用して、Googleのグラフのツールチップにクリックイベントを表示しようとしています。これまでは、これを実現するには2つの方法を試みましたが、成功することはありませんでした。

1）ツールチップにボタンを追加してonclick関数を記述する。しかし、私がボタンをクリックするたびに、私は次のエラー "キャッチされていない参照 - 関数が定義されていません"を取得します。私はディレクティブ内のほぼすべての場所に関数を配置しようとしましたが、コードはそれを選択していないようです。ツールチップで

HTMLコード：

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

exportCSV機能：Googleのチャートで

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にenabledと機能actionを交換しようとしたとき、私は列またはバーグラフ上ではなく、ツールチップにデータをエクスポート]ボタンをクリックすると、コードがオブジェクトを返します。

私が必要とするのは、ツールチップのクリックイベントをキャプチャすることです。誰かがこの問題について私を助けてくれるのなら大変です。

ありがとうございます！

Answer 1

私はあなただけ
は私がツールヒントをクリックすることができないよう、チャートoptionsにtooltip {trigger: 'selection'}なし...
は、以下の例を参照して、グローバルスコープでも

を、exportCSVを定義する必要がありだと思うそれが消える前に。
は...ツールチップを参照してください

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>