फ़्लोट के साथ, मैं एक लिंक किए गए पाई चार्ट को कैसे बना सकता हूं जो आपको अन्य वेब पृष्ठों पर ले जाता है?

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]); 
    } 
}); 

आप देखेंगे संदेश, लेकिन "आइटम" में कोई गुण नहीं है।

मैं सोच रहा था कि आप डेटा निष्कर्षों में केवल यूआरएल जोड़ देंगे, फिर ब्राउज़र को प्लॉटक्लिक फ़ंक्शन के भीतर से उचित 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)+'%'; 

क्लिक करने से खुद को wedges अभी भी कुछ खास नहीं करता है, हालांकि।

Answer 2

Derek Kurth से जवाब देने के लिए जा रहे हैं ...

ऐसा लगता है कि flot की तरह किसी भी अतिरिक्त वस्तुओं है कि हम 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); 
}); 

मैं जावास्क्रिप्ट में और नहीं इस flot पुस्तकालय के लिए नए महान हूँ ईवेंट हैंडलर का डेटा एक्सेस करने में सक्षम था। तो शायद यह चीजों को करने का सही तरीका नहीं है लेकिन यह काम करता है। मैं हमेशा महसूस किया है कि HTML में UI तत्व में अतिरिक्त जानकारी के embedding एक दर्द :(

Answer 3

मैं जानता हूँ कि यह एक पुरानी धागा है, लेकिन मैं ऐसा करने का एक और तरीका खोज की है।

यकीन gridclickable पर सेट है

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

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

     // Your options 

     grid: { 
     clickable:true 
     } 

}); 

बाइंड तत्व के लिए क्लिक करें समारोह और जावास्क्रिप्ट का उपयोग यूआरएल पर पुनर्निर्देशित करने का।

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