javascript - examples - tooltip bootstrap not working
¿Hay algún ejemplo de Flot con información sobre herramientas flotante? (7)
http://data.worldbank.org está construido usando Flot y usa información sobre herramientas.
Actualmente estoy trabajando en un gráfico de Flot , la API que parece bastante poderosa en general, aunque los ejemplos de uso avanzado no están ampliamente documentados.
La API sugiere que hay formas de establecer el campo que se puede abrir en el gráfico, no estoy seguro de qué es exactamente lo que eso significa que puedo hacer con él.
Me gustaría saber si alguien podría contribuir con algunos ejemplos que hayan encontrado o codificar para ese asunto, que demuestren ejemplos de cualquiera de los siguientes:
- Información sobre herramientas dinámica activada por el control deslizante sobre los eventos en los elementos del cuadro flotante
- Tick tooltips (al pasar el cursor sobre el eje x muestra detalles)
- Cualquier tipo de enlace / evento dinámico vinculante que se haya utilizado w Flot
El efecto que estoy buscando es similar a este ejemplo de Open Flash Chart
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.
También hay un complemento de información sobre herramientas para él, puedes encontrarlo aquí
Y también agrego alguna característica al complemento, puedes encontrarla en github. https://github.com/skeleton9/flot.tooltip
Consulte esta biblioteca para obtener información sobre sugerencias y flot
El enlace en la respuesta de Simon funcionó muy bien para proporcionar un gancho para usar con la información de herramientas flotante. Sin embargo, descubrí que tenía que buscar 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 la flotilla 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 xey son desplazamientos dentro de la flotante, por lo que la información sobre herramientas se posiciona correctamente. Los contenidos son los que se muestran 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 invocarse 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;
}
});
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 .)
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í: muestra información sobre herramientas personalizada cuando se desplaza sobre un punto en flot