W flot, jak utworzyć połączony wykres kołowy, który przeniesie Cię na inne strony internetowe?

Question

W artykule flot, w jaki sposób mogę utworzyć wykres kołowy, w którym każdy klink jest linkiem do innej strony internetowej?

Answer 1

Dałem temu szansę, ale nie byłem w stanie tego zrobić. Zacząłem this example, po czym dodał:

grid: { clickable: true }, 

tuż nad pie ": {" linii. Następnie dodałem funkcję plotclick na końcu:

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

Zobaczysz "kliknij!" wiadomość, ale "element" nie ma właściwości.

Myślałem, że po prostu dodasz adresy URL do plików danych, a następnie przekaż przeglądarkę pod właściwy adres URL z poziomu funkcji plotclick. Jeśli się zorientujesz, chciałbym wiedzieć!

Aktualizacja: Oto coś, co może zadziałać - po prostu zamienia etykiety w linki. Umieścić adres URL w danych tak:

$.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/"} 
], 

Następnie ustaw labelFormatter do czegoś podobnego:

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

kliknięcie tortu kliny się jeszcze nie robi nic specjalnego, choć.

Answer 2

Dodawanie do odpowiedzi przez Derek Kurth ...

Wygląda flot ignoruje żadnych dodatkowych przedmiotów, które zawierają w JSON. Na przykład, gdy użyłem

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

to działało bez żadnych problemów i byłem w stanie uzyskać dostęp do danych z obsługi zdarzeń jak

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

Jestem nowy na tym Flot biblioteki i nie wielki na JavaScript. Prawdopodobnie nie jest to właściwy sposób na robienie rzeczy, ale działa. Zawsze czułem, że umieszczanie dodatkowych informacji w elementach interfejsu użytkownika w formacie HTML jest ból :(

Answer 3

Wiem, że to stary wątek, ale odkryłem inny sposób to robi.

Upewnij grid jest ustawiony na clickable

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

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

     // Your options 

     grid: { 
     clickable:true 
     } 

}); 

Bind funkcją kliknięcie na element i użyć JavaScript przekierować do adresu URL.

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