info-bulle jqplot sur le graphique à barres

J'utilise le plugin jQuery jqplot pour tracer des graphiques à barres. en survolant, je voudrais afficher la coche de la barre et sa valeur sur une info-bulle. J'ai essayé 

highlighter: { show: true, 
            showTooltip: true,      // show a tooltip with data point values.
            tooltipLocation: 'nw',  // location of tooltip: n, ne, e, se, s, sw, w, nw.
            tooltipAxes: 'both',    // which axis values to display in the tooltip, x, y or both.
            lineWidthAdjust: 2.5   // pixels to add to the size line stroking the data point marker
            }

, Mais ça ne fonctionne pas. la barre devient visuellement plus légère, et il y a un petit point sur le dessus (qui irait idéalement-probablement à partir de trucs de rendu de graphique en ligne), mais il n'y a pas d'info-bulle nulle part. Quelqu'un sait comment je peux faire ça? Je vais avoir beaucoup de barres de sorte que l'axe des x sera encombré et une sorte de désordre si je les montre là-bas seulement.

21
demandé sur David 2011-02-03 20:29:20

3 réponses

Je passe par jqplot.surligneur.js et trouver une propriété non documentée: tooltipContentEditor. Je l'utilise pour personnaliser l'info-bulle pour afficher l'étiquette de l'axe des abscisses.

Utilisez quelque chose comme ceci: 

highlighter:{
        show:true,
        tooltipContentEditor:tooltipContentEditor
    },

function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
    // display series_label, x-axis_tick, y-axis value
    return plot.series[seriesIndex]["label"] + ", " + plot.data[seriesIndex][pointIndex];
}
30
répondu duckegg 2012-07-26 15:36:39

Peu importe, j'ai fait un moyen détourné de créer ma propre info-bulle via jquery.

J'ai laissé mes paramètres de surligneur tels qu'ils étaient dans ma question(bien que vous n'ayez probablement pas besoin de l'info-bulle).

Dans mon fichier js après la configuration du graphique à barres (après $.jqplot('chart', ...), j'ai mis en place une liaison de survol de la souris, comme l'ont montré certains exemples. Je l'ai modifié comme ceci:

 $('#mychartdiv').bind('jqplotDataHighlight', 
        function (ev, seriesIndex, pointIndex, data ) {
            var mouseX = ev.pageX; //these are going to be how jquery knows where to put the div that will be our tooltip
            var mouseY = ev.pageY;
            $('#chartpseudotooltip').html(ticks_array[pointIndex] + ', ' + data[1]);
            var cssObj = {
                  'position' : 'absolute',
                  'font-weight' : 'bold',
                  'left' : mouseX + 'px', //usually needs more offset here
                  'top' : mouseY + 'px'
                };
            $('#chartpseudotooltip').css(cssObj);
            }
    );    

    $('#chartv').bind('jqplotDataUnhighlight', 
        function (ev) {
            $('#chartpseudotooltip').html('');
        }
    );

Explication: {[2] } est précédemment défini, contenant les chaînes de tick de l'axe X. data de jqplot a les données actuelles sous votre souris comme un tableau de type [X-category-#, Y-value]. pointIndex a la barre # en surbrillance actuelle. Fondamentalement, nous allons l'utiliser pour obtenir la tique de la chaîne.

Ensuite, j'ai stylé l'info-bulle de sorte qu'elle apparaisse près de l'endroit où se trouve le curseur de la souris. Vous aurez probablement besoin de soustraire de mouseX et mouseY un peu si cette div est dans d'autres conteneurs positionnés.

Vous pouvez ensuite styliser #chartpseudotooltip dans votre css. Si vous voulez les styles par défaut, vous pouvez simplement ajouter à .jqplot-highlighter-tooltip dans le jqplot.CSS.

J'espère que cela est utile aux autres!

22
répondu butterywombat 2012-03-12 14:08:09

J'utilise la version du plugin surligneur sur le lien suivant:

Https://github.com/tryolabs/jqplot-highlighter

Les paramètres que j'utilise: 

highlighter: {
    show:true,
    tooltipLocation: 'n',
    tooltipAxes: 'pieref', // exclusive to this version
    tooltipAxisX: 20, // exclusive to this version
    tooltipAxisY: 20, // exclusive to this version
    useAxesFormatters: false,
    formatString:'%s, %P',
}

Les nouveaux paramètres garantissent un emplacement fixe où l'info-bulle apparaîtra. Je préfère le placer dans le coin supérieur gauche pour éviter les problèmes de redimensionnement du conteneur div.

2
répondu Wagner Dias 2012-10-05 14:02:31