jqplot Tooltip auf Balkendiagramm

Verwende ich das jquery plugin jqplot zum zeichnen einige Balkendiagramme.
auf hover, möchte ich anzeigen das Häkchen für die bar und Ihren Wert in einem tooltip angezeigt. Ich habe versucht

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
            }

aber es funktioniert nicht. die bar optisch heller, und es gibt einen kleinen Punkt auf der Oberseite (die im Idealfall gehen Sie Weg-wahrscheinlich aus dem line-chart-renderer-Kram), aber es gibt keinen tooltip überall. Wer weiß, wie kann ich das machen? Ich werde viele bars, so dass die x-Achse wird unübersichtlich und so eine Art Chaos, wenn ich zeige Ihnen dort unten nur.

InformationsquelleAutor der Frage butterywombat | 2011-02-03

  1. 28

    Ich gehe durch jqplot.highlighter.js und finden eine undokumentierte Eigenschaft: tooltipContentEditor.
    Ich benutze es, um die QuickInfo anpassen, um anzeigen x-Achsen Beschriftung.

    Verwenden Sie so etwas wie dieses:

    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];
}

    InformationsquelleAutor der Antwort duckegg

  2. 22

    nevermind, ich habe einen Umweg, um meine eigene tooltip via jquery.

    Verließ ich mein highlighter-Einstellungen, wie Sie waren, in meiner Frage (auch wenn Sie wahrscheinlich nicht brauchen die tooltip-Zeug).

    In meiner js-Datei nach der bar-Karte ist eingerichtet (nach $.jqplot('chart', ...) ich ein auf Maus-hover-Bindung, wie einige der Beispiele gezeigt haben. Ich geändert es so:

     $('#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('');
        }
    );

    Erklärung:
    ticks_array zuvor definiert, mit der x-Achse tick strings. jqplot ist data hat die aktuellen Daten unter der Maus als [x-Kategorie-#, y-Wert] type-array. pointIndex hat die aktuelle hervorgehoben bar #. Grundsätzlich werden wir verwenden, um die Zecke string.

    Dann stylte ich die Tooltipp, so dass es scheint, in der Nähe wo der Mauszeiger ist. Sie werden wahrscheinlich brauchen, um zu subtrahieren von mouseX und mouseY ein bit, wenn dieses div ist in anderen positionierten Containern.

    können Sie dann Stil #chartpseudotooltip in Ihrem css. Wenn Sie möchten, dass die Standard-Formate Sie können fügen Sie es einfach zu .jqplot-highlighter-tooltip in der die jqplot.css.

    hoffe, das ist hilfreich für andere!

    InformationsquelleAutor der Antwort butterywombat

  3. 2

    Ich bin mit der version von der highlighter-plugin auf den folgenden link:

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

    Den Parametern die ich verwende:

    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',
}

    Den neuen Parametern sorgen für einen festen Standort, wo der tooltip angezeigt wird. Ich bevorzuge, um es zu platzieren auf der oberen linken Ecke, um keine Probleme mit der Größe des div-container.

    InformationsquelleAutor der Antwort Wagner Dias

Schreibe einen Kommentar