製作jQuery Peity條形圖欄可點擊

有沒有辦法讓jQuery Peity條形圖的條形圖可點擊？製作jQuery Peity條形圖欄可點擊

我已經創建了一個2條形圖，並希望每個條形通向不同的鏈接。

我能想到的最根本的方法是行不通的：

<跨度風格=「浮動：左;」 '='button'href ='http://www.foo.com'> 0 </A>

而且我初始化柱狀圖就像這樣：

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

任何幫助將不勝感激！

來源

2016-01-22 simsp

您始終可以使用jquery's .on() handler將點擊事件綁定到任何元素以做任何事情。

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

我不知道它的HTML怎麼說圖結構，但如果每個酒吧是.preprodbar類的直接孩子，你可以隨時使用:nth-child(n)選擇：

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

canvas元素在評論中提到的選擇：

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

這裏選擇你創建的第一個<canvas>。更改:eq(0)中的數字以選擇其他任何其他索引是基於0的。如果要將事件綁定到所有畫布元素，只需從選擇器中刪除:eq(0)子字符串。

小提琴：http://jsfiddle.net/tjckobzp/20/

來源

2016-01-22 14:59:36

因此，這裏是我：\t的jQuery（文檔）。在（ '點擊'，「＃preProdCrashesBar」，函數（）{ window.location.href =「HTTP：// www.foo.com'; }）;它仍然不起作用。 – simsp

你能否提供你的html？將其粘貼到[jsfiddle.net]（http://www.jsfiddle.net）或類似的服務 –

是的！所以我在這裏寫了一些代碼：http://jsfiddle.net/simspc194/tjckobzp/18/。在JavaScript部分中，大部分是提供的jQuery Peity插件代碼。一直滾動到底部，直到看到「我的代碼從這裏開始」評論。十分感謝你的幫助！ – simsp

製作jQuery Peity條形圖欄可點擊

回答

相關問題