简体   繁体   English

在饼图中添加onclick功能

[英]Add onclick function in pie chart

I need to add a graph in my project and I tried one free graph (link is given below) I need to add an onclick handler to that pie chart. 我需要在我的项目中添加一个图形,我尝试了一个自由图形(链接如下)我需要在该饼图上添加一个onclick处理程序。 I think need to add the onclick function inside 我认为需要在里面添加onclick功能

snap.svg.js snap.svg.js

(in path tag) I tried a lot but didn't get (在路径标签中)我尝试了很多,但没有得到

http://www.jqueryscript.net/demo/Responsive-Pie-Chart-Plugin-wit-jQuery-Snap-SVG-Pizza http://www.jqueryscript.net/demo/Responsive-Pie-Chart-Plugin-wit-jQuery-Snap-SVG-Pizza

.onclick should be set to a function instead of a string. .onclick应该设置为函数而不是字符串。 Try 尝试

elemm.onclick = function() { alert('blah'); elemm.onclick = function(){alert('blah'); }; };

You can use jquery 你可以使用jquery

If you want to add a click event to a slice: 如果要向切片添加单击事件:

  // this adds a click event to the first slice
  $("path[data-id='s0']").click(function() {
     alert('you clicked slice one');
  });

  // if you have multiple pie's you can be more specific
  $("#svg svg path[data-id='s0']").click(function(){
     alert('you just clicked pie with id #svg');
  });

if you want to add a click event to the whole pie: 如果要将click事件添加到整个饼图:

  $('#svg').click(function(e){
      alert('you just clicked the whole pie!');
  });

In your pizza.js file you could add an onclick listener following Snap.svg 在您的pizza.js文件中,您可以在Snap.svg之后添加一个onclick监听器

   pie : function (legend) {
      // pie chart concept from JavaScript the 
      // Definitive Guide 6th edition by David Flanagan
      ...

        path.node.setAttribute('data-id', 's' + i);

        //============= You could add your listener here
        path.click(alert("My click function"));
        //===============================================


        this.animate(path, cx, cy, settings);

        // The next wedge begins where this one ends
        start_angle = end_angle;
      }

  return [legend, svg.node];
},

Another option is trying to add new events through the events {} @ pizza.js 另一个选择是尝试通过事件{} @ pizza.js添加新事件

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM