在饼图中添加onclick功能

时间:2014-01-17 09:50:58

标签: java javascript html snap.svg

我需要在项目中添加一个图表,我尝试了一个免费图表(链接如下) 我需要为该饼图添加一个onclick处理程序。我认为需要在

中添加onclick功能
  

snap.svg.js

(在路径标记中)我尝试了很多但没有得到

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

3 个答案:

答案 0 :(得分:0)

.onclick应设置为函数而不是字符串。尝试

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

答案 1 :(得分:0)

您可以使用jquery

如果要将切片事件添加到切片:

  // 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');
  });

如果您想将click事件添加到整个饼图中:

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

答案 2 :(得分:0)

在你的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];
},

另一种选择是尝试通过事件{} @ pizza.js

添加新事件