Con flot, ¿cómo puedo crear un gráfico circular vinculado que lo lleve a otras páginas web?

Question

En flot, ¿cómo puedo crear un gráfico circular donde cada cuña es un enlace a una página web diferente?

Answer 1

Le di una oportunidad, pero no pude hacerlo. Empecé con this example, luego agregó:

grid: { clickable: true }, 

justo encima de la "torta: {" línea. Luego añade una función plotclick al final: "clic"

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

verás la mensaje, pero "elemento" no tiene propiedades.

Estaba pensando que acaba de agregar URL a los objetos de datos, luego reenviar el navegador a la URL correspondiente desde la función de trazado de trazos. Si lo resuelves, ¡me interesaría saber!

Actualización: Aquí hay algo que podría funcionar: simplemente convierte las etiquetas en enlaces. Poner las URL de los datos de la siguiente manera:

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

asentando después la labelFormatter a algo como:

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

Al hacer clic en el pastel cuñas mismos todavía no hace nada especial, sin embargo.

Answer 2

Agregando a la respuesta por Derek Kurth ...

Parece que flot está ignorando los objetos adicionales que se incluyen en el JSON. Por ejemplo cuando utilicé

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

funcionó sin ningún problema y que era capaz de acceder a los datos desde el controlador de eventos como

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

Soy nuevo en esta biblioteca flot y no es muy bueno en JavaScript. Entonces probablemente esta no es la forma correcta de hacer las cosas, pero funciona. Siempre he sentido que incorporar información adicional en elementos de la interfaz en HTML es un dolor :(

Answer 3

Sé que esto es un viejo hilo, pero he descubierto otra forma de hacer esto.

Asegúrese grid se establece en clickable

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

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

     // Your options 

     grid: { 
     clickable:true 
     } 

}); 

unen a una función de clic en el elemento y el uso de JavaScript para redirigir a la URL.

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