使jQuery Peity Bar Graph条成为可点击的

Question

Is there a way to make the bars of a jQuery Peity bar graph clickable?

I have created a 2 bar graph, and would like each bar to lead to a different link.

The most basic method I can think of is not working:

<span style='float:left;' id='" + id + "preProdBarGraph' class='preprodbar hidden'> <a class='button' href=' http://www.foo.com '>0</a>, <a class='button' href=' http://www.foo.com '>0</a>

And I am initializing the bar graph like such:

// set up the graph
jQuery(".preprodbar").peity("bar", {
      fill: ["#e71d32", "#FDD600", "#5AAAFA"]
})

Any help would be greatly appreciated!

Answer 1

You can always use jquery's .on() handler to bind click events to any element to do anything.

$(document).ready(function(){
    $(document).on('click',''#leftBar',function(){
         // do something
         window.location.href = 'http://www.mylink.com';
    });

    $(document).on('click',''#rightBar',function(){
         // do something
         window.location.href = 'http://www.mylink.com';
    });
});

I don't know how that graph structures its html, but if each bar is a direct child of the .preprodbar class you can always use the :nth-child(n) selector:

$(document).ready(function(){
    $(document).on('click','.prepodbar :nth-child(1)',function(){
         // do something on the first child
         window.location.href = 'http://www.mylink.com';
    });

    $(document).on('click','.prepodbar :nth-child(2)',function(){
         // do something on the second child
         window.location.href = 'http://www.mylink.com';
    });
}); 

For the canvas element selection mentioned in the comments:

$(document).on('click','canvas:eq(0)' ,function(){
     // do something
     $(this).css('background-color','#f00')
});

This selects the first <canvas> that you created. Change the number in the :eq(0) to select any other, index is 0-based. If you want to bind the event to all canvas elements, simply remove the :eq(0) substring from the selector.

Fiddle: http://jsfiddle.net/tjckobzp/20/