Estoy usando el complemento jquery jqplot para trazar algunos gráficos de barras. al pasar el mouse, me gustaría mostrar la marca de la barra y su valor en una información sobre herramientas. He intentado
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 }pero no funciona la barra se vuelve visualmente más clara y hay un pequeño punto en la parte superior (que idealmente desaparecería, probablemente debido a las cosas del renderizador del gráfico de líneas), pero no hay información sobre herramientas en ninguna parte. ¿Alguien sabe cómo puedo hacer esto? Tendré muchas barras, por lo que el eje x estará desordenado y un poco desordenado si solo las muestro allí abajo.
Reviso jqplot.highlighter.js y encuentro una propiedad no documentada: tooltipContentEditor . Lo uso para personalizar la información sobre herramientas para mostrar la etiqueta del eje x.
Usa algo como esto:
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]; }no importa, hice una forma indirecta de crear mi propia información sobre herramientas a través de jquery.
Dejé la configuración de mi resaltador como estaba en mi pregunta (aunque probablemente no necesite la información sobre herramientas).
En mi archivo js después de configurar el gráfico de barras (después $.jqplot('chart', ... ) configuré un enlace al pasar el mouse por encima, como se mostró en algunos de los ejemplos. Lo modifiqué así:
$('#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(''); } ); explicación: ticks_array está previamente definido y contiene las cadenas de ticks del eje x. Los data de jqplot tienen los datos actuales debajo de su mouse como una matriz de tipo [x-category-#, y-value]. pointIndex tiene la barra resaltada actual #. Básicamente usaremos esto para obtener la cadena de ticks.
Luego diseñé la información sobre herramientas para que apareciera cerca de donde está el cursor del mouse. Probablemente necesitará restar un poco de mouseX y mouseY si este div está en otros contenedores posicionados.
luego puede #chartpseudotooltip en su css. Si desea los estilos predeterminados, puede agregarlos a .jqplot-highlighter-tooltip en jqplot.css.
¡espero que esto sea útil para otros!
Estoy usando la versión del complemento resaltador en el siguiente enlace:
https://github.com/tryolabs/jqplot-resaltador
Los parámetros que estoy usando:
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', }Los nuevos parámetros aseguran una ubicación fija donde aparecerá la información sobre herramientas. Prefiero colocarlo en la esquina superior izquierda para evitar problemas al cambiar el tamaño del contenedor div.