¿Algún ejemplo de Flot con información sobre herramientas flotante?

4 minutos de lectura

avatar de usuario de j pimmel
j pimmel

actualmente estoy trabajando en un Flotador gráfica, la API lo que parece bastante poderoso en general, aunque los ejemplos de uso avanzado no están ampliamente documentados.

La API sugiere que hay formas de establecer que se pueda desplazar en el gráfico, no es que esté seguro de qué significa eso exactamente que puedo hacer con él.

Me gustaría saber si alguien podría contribuir con algunos ejemplos que haya encontrado, o código para el caso, que muestren ejemplos de cualquiera de los siguientes:

  • Información sobre herramientas dinámica activada al pasar el mouse sobre eventos en elementos de diagrama de flotador
  • Marque la información sobre herramientas (al pasar el cursor sobre el eje x se muestran los detalles)
  • Cualquier tipo de vinculación de eventos dinámicos/desplazamiento que se haya utilizado con Flot

El efecto que estoy buscando es similar a este Ejemplo de gráfico de Flash abierto

Avatar de usuario de Simon Lieschke
Simón Lieschke

Mira esto este ejemplo flotante que muestra información sobre herramientas para puntos de trazado en el gráfico. (Asegúrese de seleccionar el Habilitar información sobre herramientas caja.)

Avatar de usuario de Green Su
do verde

También hay un complemento de información sobre herramientas simple para él, puede encontrarlo aquí

Y también agrego alguna característica al complemento, puedes encontrarlo en github.
https://github.com/skeleton9/flot.tooltip

  • El complemento de información sobre herramientas de Flot es extremadamente fácil de usar, para casos simples, todo lo que necesita hacer es agregar tooltip: true para usted .plot() ajustes.

    – geerlingguy

    10 de septiembre de 2012 a las 23:29

  • Considere usar el complemento original, no la bifurcación 😉 github.com/krzysu/flot.tooltip

    – Rmatt

    10 de enero de 2014 a las 11:27

  • ¿Sabe cómo personalizar la información sobre herramientas para que se corrija (quiero decir, mostrar siempre …)? no tenemos mucha documentacion en el amigo google..

    – Roberval Sena

    8 de julio de 2016 a las 8:03

http://data.worldbank.org está construido usando Flot y usa información sobre herramientas.

  • ¿Sabe cómo personalizar la información sobre herramientas para que se corrija (quiero decir, mostrar siempre …)? no tenemos mucha documentacion en el amigo google..

    – Roberval Sena

    8 de julio de 2016 a las 8:04

El enlace en la respuesta de Simon funcionó muy bien para proporcionar un gancho para usar con la información sobre herramientas flotante. Sin embargo, descubrí que tenía que investigar y cortar el código para lograr el efecto de desplazamiento. Aquí está el resultado (básicamente palabra por palabra de http://people.iola.dk/olau/flot/examples/interacting.html).

La única configuración que necesita cambiar en la inicialización de flot está en el objeto de opciones. Necesita incluir esto como una de las opciones:

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

Esta función construye y muestra el elemento de información sobre herramientas cuando se llama. Los parámetros x e y son compensaciones dentro del flot, por lo que la información sobre herramientas se posiciona correctamente. El contenido es lo que se muestra en la información sobre herramientas.

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

Este es el enlace, solo debe llamarse una vez cuando el elemento utilizado como marcador de posición para flot está disponible. Conecta el controlador de eventos. El punto anterior se usa como una bandera para mostrar la información sobre herramientas.

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

Echa un vistazo a esta biblioteca para obtener información sobre herramientas e integración de flotadores.

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

  • ¿Sabe cómo personalizar la información sobre herramientas para que se corrija (quiero decir, mostrar siempre …)? no tenemos mucha documentacion en el amigo google..

    – Roberval Sena

    8 de julio de 2016 a las 8:04

  • No, pero eso suena como algo excelente para hacer como una nueva pregunta 🙂

    –Kyle Mathews

    08/07/2016 a las 16:00


avatar de usuario de rynop
Rinop

http://craigsworks.com/projects/qtip2/demos/#flot es mi biblioteca de información sobre herramientas JS favorita. Es bastante rudo y tiene integración flotante.

  • ¿Sabe cómo personalizar la información sobre herramientas para que se corrija (quiero decir, mostrar siempre …)? no tenemos mucha documentacion en el amigo google..

    – Roberval Sena

    8 de julio de 2016 a las 8:04

  • No, pero eso suena como algo excelente para hacer como una nueva pregunta 🙂

    –Kyle Mathews

    08/07/2016 a las 16:00


Avatar de usuario de la comunidad
Comunidad

Puede agregar datos personalizados a la matriz de datos y usarlos para mostrar información sobre herramientas.

Vea mi respuesta y el ejemplo completo aquí: mostrar información sobre herramientas personalizada al pasar el mouse sobre un punto en flot

¿Ha sido útil esta solución?