Diagramme à barres empilées et affichage des valeurs de barres sur la souris

Question

J'essaie de comprendre la fonctionnalité d'info-bulle de Flot mais pas vraiment la tête autour!

Je suis en train de réaliser une info-bulle qui affiche l'étiquette et la valeur de chaque section d'un graphique à barres empilées

Est-ce que quelqu'un en mesure de pointer mon vers un exemple ou fournir le code pour le faire?

Answer 1

Le code suivant fonctionne pour mon diagramme à barres empilées Flot, basé sur l'exemple Flot qui montre le survol du point de données. L'astuce est que les valeurs 'item' dans le tableau empilé sont cumulatives, donc la valeur 'y' affichée dans la pointe de l'outil doit d'abord soustraire le point de donnée pour les barres en dessous.

var previousPoint = null; 
$("#chart").bind("plothover", function (event, pos, item) { 
    if (item) { 
     if (previousPoint != item.datapoint) { 
      previousPoint = item.datapoint; 

      $("#tooltip").remove(); 
      var x = item.datapoint[0], 
       y = item.datapoint[1] - item.datapoint[2]; 

      showTooltip(item.pageX, item.pageY, y + " " + item.series.label); 
     } 
    } 
    else { 
     $("#tooltip").remove(); 
     previousPoint = null;    
    } 
}); 

Je ne trouve pas dans la documentation Flot, mais le tableau item.datapoint semblait contenir ce que je avais besoin dans la pratique.

Answer 2

Le code ci-dessus a causé des problèmes de redessiner pour moi. Voici un code amélioré:

var previousPoint = [0,0,0]; 
$("#regionsChart").bind("plothover", function (event, pos, item) { 
    if (item) { 
     if (previousPoint[0] != item.datapoint[0] 
      || previousPoint[1] != item.datapoint[1] 
      || previousPoint[2] != item.datapoint[2] 
     ) { 
      previousPoint = item.datapoint; 

      $("#tooltip").remove(); 
      var x = item.datapoint[0], 
       y = item.datapoint[1] - item.datapoint[2]; 

      showTooltip(item.pageX, item.pageY, item.series.label + " " + y.toFixed(0)); 
     } 
    } 
    else { 
     $("#tooltip").remove(); 
     previousPoint = [0,0,0]; 
    } 
}); 

Answer 3

C'est le même que Thomas ci-dessus, sauf que je bougeais l'info-bulle jusqu'à l'empêcher de bloquer l'action de vol stationnaire.

var previousPoint = [0,0,0]; 
 
$("#regionsChart").bind("plothover", function (event, pos, item) { 
 
    if (item) { 
 
     if (previousPoint[0] != item.datapoint[0] 
 
      || previousPoint[1] != item.datapoint[1] 
 
      || previousPoint[2] != item.datapoint[2] 
 
     ) { 
 
      previousPoint = item.datapoint; 
 

 
      $("#tooltip").remove(); 
 
      var x = item.datapoint[0], 
 
       y = item.datapoint[1] - item.datapoint[2]; 
 

 
      showTooltip(item.pageX, item.pageY - 35, item.series.label + " " + y.toFixed(0)); 
 
     } 
 
    } 
 
    else { 
 
     $("#tooltip").remove(); 
 
     previousPoint = [0,0,0]; 
 
    } 
 
});

Answer 4

La solution utilise tooltipOpts ->contenu procédé avec une fonction de rappel pour revenir correctement les données dynamiques à l'étiquette. J'ai compris que le passage d'un 4ème argument à la fonction de rappel de "tooltipOpts" vous donne en fait l'ensemble de l'objet de données à partir duquel est construit le graphique/graphe. A partir de là, vous pouvez facilement extraire les étiquettes de l'axe X, en utilisant le deuxième argument de cette même fonction comme index de l'étiquette à extraire.

Exemple:

objet de données Je passe à la fonction du terrain:

[ 
    { data: [[1,137],[2,194],[3,376],[4,145],[5,145],[6,145],[7,146]] } 
], 
{ 
    bars: { show: true, fill: true, barWidth: 0.3, lineWidth: 1, fillColor: { colors: [{ opacity: 0.8 }, { opacity: 1}] }, align: 'center' }, 
    colors: ['#fcc100'], 
    series: { shadowSize: 3 }, 
    xaxis: { 
     show: true, 
     font: { color: '#ccc' }, 
     position: 'bottom', 
     ticks: [[1,'Thursday'],[2,'Friday'],[3,'Saturday'],[4,'Sunday'],[5,'Monday'],[6,'Tuesday'],[7,'Wednesday']] 
    }, 
    yaxis:{ show: true, font: { color: '#ccc' }}, 
    grid: { hoverable: true, clickable: true, borderWidth: 0, color: 'rgba(120,120,120,0.5)' }, 
    tooltip: true, 
    tooltipOpts: { 
     content: function(data, x, y, dataObject) { 
      var XdataIndex = dataObject.dataIndex; 
      var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label; 
      return y + ' stories created about your page on ' + XdataLabel 
     }, 
     defaultTheme: false, 
     shifts: { x: 0, y: -40 } 
    } 
} 

Histogramme rendu de l'objet de données ci-dessus:

Comme vous pouvez le voir sur l'aperçu de l'image, la logique utilisé pour rendre former dynamiquement les données réelles du contenu de l'étiquette est la suivante:

tooltipOpts: { 
    content: function(data, x, y, dataObject) { 
     var XdataIndex = dataObject.dataIndex; 
     var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label; 
     return y + ' stories created about your page on ' + XdataLabel; 
    }, 
    defaultTheme: false, 
    shifts: { x: 0, y: -40 } 
}