我一直试图有一个点击事件在谷歌图表工具提示与图表选项isHtml: true。到目前为止,我已经尝试了两种方法来完成这项工作,但没有成功。
1)通过在工具提示中添加一个按钮来编写onclick函数。但是,每当我单击该按钮时,我就会得到以下错误“未定义的未定义引用-函数”。我尝试将这个函数几乎无处不在地放在指令中,但是代码似乎并没有把它取出来。
工具提示中的HTML代码:
'<h5 style="padding-left:.66em;" id="export" href="#" onclick="exportCSV()">Export CSV</h5>exportCSV函数:
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); } });
但是,当我尝试用action中的enabled替换函数chart.setAction时,当我单击列或条形图而不是工具提示中的导出数据按钮时,代码会返回对象。
我所需要的只是捕捉工具提示中的click事件。如果有人能在这个问题上帮我,那就太好了。
谢谢!
发布于 2016-05-04 18:33:33
我认为你只需要在全局范围内定义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>
https://stackoverflow.com/questions/37032783
复制相似问题