首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >工具提示里面有javascript onclick事件?

工具提示里面有javascript onclick事件?
EN

Stack Overflow用户
提问于 2016-05-04 16:01:08
回答 1查看 1.9K关注 0票数 1

我一直试图有一个点击事件在谷歌图表工具提示与图表选项isHtml: true。到目前为止,我已经尝试了两种方法来完成这项工作,但没有成功。

1)通过在工具提示中添加一个按钮来编写onclick函数。但是,每当我单击该按钮时,我就会得到以下错误“未定义的未定义引用-函数”。我尝试将这个函数几乎无处不在地放在指令中,但是代码似乎并没有把它取出来。

工具提示中的HTML代码:

代码语言:javascript
运行
复制
'<h5 style="padding-left:.66em;" id="export" href="#" onclick="exportCSV()">Export CSV</h5>

exportCSV函数:

代码语言:javascript
运行
复制
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事件。如果有人能在这个问题上帮我,那就太好了。

谢谢!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-05-04 18:33:33

我认为你只需要在全局范围内定义exportCSV

参见下面的例子..。

另外,如果在图表tooltip {trigger: 'selection'}中没有options

我似乎不能在工具提示消失之前点击它。

必须单击饼片才能看到工具提示。

代码语言:javascript
运行
复制
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");
}
代码语言:javascript
运行
复制
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37032783

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档