Avec flot, comment puis-je créer un graphique à secteurs lié qui vous conduit à d'autres pages Web?

Question

Dans flot , comment puis-je créer un graphique à secteurs où chaque coin est un lien vers une page Web différente?

Answer 1

J'ai tenté le coup, mais je n'ai pas pu le faire. J'ai commencé par cet exemple , puis ajouté:

grid: { clickable: true },

juste au-dessus de la "tarte": {" ligne. Puis j'ai ajouté une fonction plotclick à la fin:

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

Vous verrez le " clic! " message, mais " article " n'a pas de propriétés.

Je pensais que vous ajouteriez simplement des URL aux objets de données, puis transmettriez le navigateur à l'URL appropriée à partir de la fonction plotclick. Si vous le comprenez, je serais intéressé de le savoir!

Mise à jour: voici quelque chose qui pourrait fonctionner: il transforme simplement les libellés en liens. Placez les URL dans vos données comme suit:

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

Ensuite, définissez labelFormatter sur quelque chose comme:

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

Cependant, cliquer dans les secteurs de tarte ne fait toujours rien de spécial.

Answer 2

Je sais que c'est un vieux fil, mais j'ai découvert une autre façon de le faire.

Assurez-vous que grille est défini sur cliquable

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

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

      // Your options

      grid:  {
        clickable:true
      }

 });

Liez une fonction de clic à l'élément et utilisez javascript pour rediriger vers l'URL.

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

Answer 3

Ajout à la réponse par Derek Kurth ...

Il semble que flot ignore tous les objets supplémentaires que nous incluons dans le JSON. Par exemple quand j'ai utilisé

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

cela a fonctionné sans problème et j'ai pu accéder aux données du gestionnaire d'événements comme

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

Je suis nouveau dans cette bibliothèque et pas très doué en JavaScript. Donc, ce n’est probablement pas la bonne façon de faire les choses, mais cela fonctionne. J'ai toujours pensé que l'incorporation d'informations supplémentaires dans les éléments d'interface utilisateur en HTML était une tâche pénible: