使用flot，我怎樣才能創建一個鏈接餅圖，將您帶到其他網頁？

Question

在flot中，如何創建餅圖，其中每個楔形圖標都是指向不同網頁的鏈接？

Answer 1

我給了它一個鏡頭，但我無法做到這一點。我開始與this example，然後補充說：

grid: { clickable: true }, 

右上方的 「餡餅：{」 行。然後我在最後添加了一個plotclick功能：

$("#placeholder").bind("plotclick", function (event, pos, item) { 
    alert('click!'); 
    for(var i in item){ 
     alert('my '+i+' = '+ item[i]); 
    } 
}); 

您會看到「click！」消息，但「item」沒有屬性。

我在想你只需要將URL添加到數據對象中，然後將瀏覽器轉發到plotclick函數中相應的URL。如果你弄明白了，我很有興趣知道！

更新：這裏有一些可能的工作 - 它只是將標籤變成鏈接。把網址中的數據是這樣的：

$.plot($("#placeholder"), [ 
    { label: "Serie1", data: 10, url: "http://stackoverflow.com"}, 
    { label: "Serie2", data: 30, url: "http://serverfault.com"}, 
    { label: "Serie3", data: 90, url: "http://superuser.com"}, 
    { label: "Serie4", data: 70, url: "http://www.google.com"}, 
    { label: "Serie5", data: 80, url: "http://www.oprah.com"}, 
    { label: "Serie6", data: 110, url: "http://www.realultimatepower.net/"} 
], 

然後labelFormatter設置是這樣的：

return '<a href="'+serie.url+'">'+serie.label+'</a><br/>'+Math.round(serie.percent)+'%'; 

點擊的扇形邊自己仍然沒有什麼特別之處，但。

Answer 2

通過Derek Kurth添加到答案...

它看起來像海軍報無視任何額外的對象，我們包括在JSON。例如，當我用

data: [10, 0, "http://stackoverflow.com"] 
// 0 is used as an intercept value for y-axis 

它的工作沒有任何麻煩，我能夠從事件處理程序訪問數據，如

$("#placeholder").bind("plotclick", function (event, pos, item) { 
    alert(item.series.data); 
}); 

我是新來這個海軍報庫，而不是偉大的JavaScript的。所以這可能不是正確的做事方式，但它的工作原理。我一直覺得，嵌入在HTML UI元素的其他信息是一種痛苦:(

Answer 3

我知道這是一個古老的線程，但我發現這樣做的另一種方式。

確保grid設置爲clickable

var data = [{ 
    "label" : "series1", 
    "data" : 24, 
    "url" : "http://stackoverflow.com" 
}, 
{ 
// etc etc 
}]; 

$.plot($('.chart'), data, function() { 

     // Your options 

     grid: { 
     clickable:true 
     } 

}); 

綁定點擊功能的元素，並使用JavaScript重定向到URL。

$('.chart').bind("plotclick", function(event,pos,obj) { 
    window.location.replace(data[obj.seriesIndex].url); 
});