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

Question

Actualmente estoy trabajando en un Flot , el API 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 hoverable en el gráfico, no es que esté seguro de qué significa exactamente eso que puedo hacer con él.

Me gustaría saber si alguien podría aportar algunos ejemplos con los que se han encontrado, o codificar para el caso, que demuestren ejemplos de cualquiera de los siguientes:

• Información sobre herramientas dinámicas activadas al pasar el cursor sobre los eventos en los elementos del gráfico Flot
• Información sobre herramientas para marcar (al pasar el mouse sobre el eje x muestra detalles)
• Cualquier tipo de enlace de desplazamiento / evento dinámico que se haya utilizado con Flot

El efecto que estoy buscando es similar a esto Abrir el ejemplo de Flash Chart

Answer 1

Eche un vistazo a este ejemplo de flot que muestra información sobre herramientas para puntos de trazado en el gráfico. (Asegúrese de seleccionar la casilla de verificación Habilitar información sobre herramientas ).

Answer 2

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

Answer 3

http://data.worldbank.org se construye utilizando Flot y utiliza información sobre herramientas.

Answer 4

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 cavar y cortar código para lograr el efecto de desplazamiento. Aquí está el resultado (básicamente textualmente de http://people.iola.dk/olau /flot/examples/interacting.html ).

La única configuración que debe cambiar en la inicialización de flot está en el objeto de opciones. Debe 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 están desplazados dentro de la flot para que la información sobre herramientas se posicione 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. previousPoint se utiliza como indicador 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;
        }
    });

Answer 5

Consulte esta biblioteca para obtener información sobre herramientas y la integración de flot

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

Answer 6

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

Answer 7

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

Vea mi respuesta y ejemplo completo aquí: muestra información sobre herramientas personalizada al desplazarse sobre un punto en flot