Qualche esempio di Flot con tooltip mobili?

Question

Attualmente sto lavorando a un Flot grafico, il API che nel complesso sembra piuttosto potente, sebbene esempi di uso avanzato non siano ampiamente documentati.

L'API suggerisce che ci sono modi per impostare l'hoverable sul grafico, non che io sia sicuro di cosa significhi esattamente che cosa posso farci.

Vorrei sapere se qualcuno potrebbe contribuire con alcuni esempi che ha incontrato, o codice per quella materia, che dimostrano esempi di uno dei seguenti:

• Tooltip dinamici innescati dal passaggio del mouse sopra gli eventi sugli elementi del grafico Flot
• Spunta le descrizioni dei comandi (passando con il mouse sopra la xaxis mostra i dettagli)
• Qualsiasi tipo di associazione al passaggio del mouse / evento dinamico che è stata utilizzata w Flot

L'effetto che sto cercando è simile a questo Apri esempio di grafico Flash

Answer 1

Dai un'occhiata a questo esempio di flottante che dimostra i suggerimenti per i punti della trama sul grafico. (Assicurati di selezionare la casella di controllo Abilita descrizione comandi .)

Answer 2

Esiste anche un semplice plugin tooltip, puoi trovarlo qui

E aggiungo anche alcune funzionalità al plugin, le puoi trovare su github. https://github.com/skeleton9/flot.tooltip

Answer 3

http://data.worldbank.org è realizzato con Flot e utilizza tooltip.

Answer 4

Il link nella risposta di Simon ha funzionato molto bene per fornire un hook da usare con i tooltip mobili. Tuttavia, ho scoperto che dovevo scavare e tagliare il codice per ottenere l'effetto hover. Ecco il risultato (sostanzialmente testualmente da http://people.iola.dk/olau /flot/examples/interacting.html ).

L'unica impostazione che deve cambiare nell'inizializzazione del flottante è nell'oggetto opzioni. Deve includere questo come una delle opzioni:

var options = {
 //... : {},
 grid: { hoverable: true }
};

Questa funzione costruisce e mostra l'elemento tooltip quando viene chiamato. I parametri xey sono offset all'interno del flottante, quindi la descrizione comandi si posiziona correttamente. I contenuti sono quelli mostrati nella descrizione comandi

function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #fdd',
            padding: '2px',
            'background-color': '#fee'
        }).appendTo("body").fadeIn(200);
    }

Questo è il bind, dovrebbe essere chiamato solo una volta quando l'elemento utilizzato come segnaposto per flot è disponibile. Collega il gestore eventi. previousPoint viene utilizzato come flag per visualizzare la descrizione comandi

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

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

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

Answer 5

Dai un'occhiata a questa libreria per l'integrazione di tooltip e flot

https://github.com/krzysu/flot.tooltip

Answer 6

http://craigsworks.com/projects/qtip2/demos/#flot è la mia libreria di tooltip JS preferita. È piuttosto tosto e ha l'integrazione flot.

Answer 7

È possibile aggiungere dati personalizzati all'array di dati e utilizzarli per visualizzare i suggerimenti.

Vedi la mia risposta e l'esempio completo qui: visualizzazione della descrizione comandi personalizzata quando si passa sopra un punto in flottante