Diagrammes à secteurs - Sélection externe des tranches

Question

J'ai trouvé this solution.

Si le type de graphique est pie, comment spécifier les paramètres (x, y) de la surbrillance (x, y)?

Merci

Désolé pour mon mauvais anglais.

Answer 1

Malheureusement, le flot n'expose pas le code de mise en évidence des secteurs à l'utilisateur. Nous sommes donc à peu près pas de chance, mais ce qui peut fonctionner pour vous est la synthèse d'un événement de clic à l'endroit approprié sur la page:

$("#highligher").click(function() { 
    var e = jQuery.Event('click'); 
    e.pageX = 250; //add a made up x/y coordinate to the click event 
    e.pageY = 250; 
    $('#plot canvas:first').trigger(e); //trigger the click event on the canvas 
}); 

Ici, il est en action: http://jsfiddle.net/ryleyb/mHJm5/

Le problème est que vous devez savoir où la tranche que vous voulez mettre en évidence est déjà. Ce serait assez facile à définir si le graphique est statique. S'il s'agit d'un graphique dynamique, vous devrez creuser dans la source du code à secteurs pour déterminer comment calculer la tranche de secteur. Il pourrait être plus facile dans ce cas d'avoir une copie de toutes les fonctions de tarte et de dessiner manuellement sur la superposition de tarte.

Answer 2

Nous maintenons l'état de sélection en dehors du diagramme (en tant que modèle de backbone). Lorsqu'un événement de sélection (clic) se produit, nous définissons la tranche sélectionnée dans le modèle. Lorsque la sélection change, nous actualisons le graphique à l'aide d'une couleur de sélection pour les tranches de secteurs sélectionnées.

var data = []; 
var color = slice.index == selected ? '#FF0000' : '#0000FF'; 
data.push({label:slice.Label,data:slice.Value,color:color}); 

L'extrait ci-dessus utilise du bleu pour toutes les tranches non sélectionnées, du rouge pour la tranche sélectionnée. Votre logique de couleur sera plus sophistiquée.

REMARQUE: Vous pouvez également utiliser rgba CSS pour les couleurs, ce qui donne un très bel effet. Par exemple:

var color = slice.index == selected ? 'rgba(0,0,255,1)' : 'rgba(0,0,255,0.5)'; 

Answer 3

Nous venons de ce travail en modifiant quelques choses ...

j'ai changé highlight et unhighlight dans jquery.flot.pie.js à pieHighlight et pieUnhighlight.

Puis, après ces deux lignes jquery.flot.pie.js ...

plot.hooks.processOptions.push(function(plot, options) { 
      if (options.series.pie.show) { 

J'ai ajouté ...

   plot.highlight = pieHighlight; 
       plot.unhighlight = pieUnhighlight;