jqplot tooltip en gráfico de barras

Estoy usando el plugin jqplot de jquery para trazar algunos gráficos de barras. en hover, 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 visualmente se vuelve más ligera, y hay un pequeño punto en la parte superior (que idealmente desaparecería probably probablemente de las cosas del renderizador de gráficos de líneas), pero no hay información sobre herramientas en ningún lugar. Alguien sabe cómo puedo hacer esto? Voy a tener un montón de barras por lo que el eje x será desordenado y tipo de un lío si les muestro sólo ahí abajo.

Author: David, 2011-02-03
Source

3 answers

Paso por jqplot.resaltador.js y encontrar una propiedad indocumentada: 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];
}
 30
Author: duckegg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-07-26 15:36:39

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 al pasar el ratón, como algunos de los ejemplos mostraron. 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, conteniendo las cadenas de tick del eje x. jqplot data tiene los datos actuales debajo del ratón como una matriz de tipo [x-category -#, y-value]. pointIndex tiene la barra resaltada actual #. Básicamente usaremos esto para obtener la cadena tick.

Luego le di estilo a la información sobre herramientas para que aparezca cerca de donde está el cursor del ratón. Probablemente tendrá que restar de mouseX y mouseY un poco si este div está en otros contenedores posicionados.

Luego puedes aplicar el estilo #chartpseudotooltip en tu css. Si desea los estilos predeterminados, puede agregarlos a .jqplot-highlighter-tooltip en el el jqplot.css.

¡Espero que esto sea útil para los demás!

 22
Author: butterywombat,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-03-12 14:08:09

Estoy usando la versión del plugin highlighter en el siguiente enlace:

Https://github.com/tryolabs/jqplot-highlighter

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 emergente. Prefiero colocarlo en la esquina superior izquierda para evitar problemas con el cambio de tamaño del div del contenedor.

 2
Author: Wagner Dias,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-05 14:02:31