información sobre herramientas de jqplot en el gráfico de barras

4 minutos de lectura

informacion sobre herramientas de jqplot en el grafico de barras
mantecosowombat

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

  • Correcto. Eso es lo que estaba buscando. ¡Gracias!

    – Tomasz Rozmus

    23 ago.

  • gran propiedad/solución de devolución de llamada. Eso me ayudaría mucho.

    – brunobord

    18 sep.

informacion sobre herramientas de jqplot en el grafico de barras
mantecosowombat

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 de $.jqplot('chart', ...) Configuré un enlace de desplazamiento del mouse, como se muestra 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 se define previamente, que contiene las cadenas de ticks del eje x. jqplot data tiene los datos actuales debajo de su mouse como un [x-category-#, y-value] matriz de tipos. 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 de mouseX y mouseY un poco si este div está en otros contenedores posicionados.

entonces puedes peinar #chartpseudotooltip en tu CSS. Si desea los estilos predeterminados, simplemente puede agregarlos a .jqplot-highlighter-tooltip en el jqplot.css.

¡espero que esto sea útil para otros!

  • Deberías compartir eso aquí para ayudar a cualquier otra persona con el mismo problema.

    – jcolebrand

    03 feb.

  • @butterywombat: tengo el mismo problema que tú ahora y trato de incorporar tu código con el mío y no vi ningún cambio en la información sobre herramientas. Soy realmente nuevo en jquery, me gustaría pedir algún consejo. especialmente en “#mychartdiv” y “#chartv”, ¿necesito tener esos dos definidos? Muchas gracias. 🙂

    – Ianthe

    16 nov.


  • oh no, no me llego ese mensaje…bueno responde un año después Creo que no cambié ‘#chartv’ por ‘#mychartdiv’ cuando pegué mi código en el desbordamiento de la pila. Así que estoy bastante seguro de que se supone que #chartv dice #mychartdiv. Los pondría en el archivo html donde desea que aparezca el gráfico

    – butterywombat

    16 ene.

1641823017 136 informacion sobre herramientas de jqplot en el grafico de barras
Wagner Dias

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.

.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad