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

Question

Estoy usando el jquery plugin jqplot para trazar algunos gráficos de barras. al pasar el ratón, 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 más clara visualmente, y hay un pequeño punto en la parte superior (lo que idealmente desaparecería, probablemente de las cosas del renderizador de gráficos de líneas), pero no hay información sobre herramientas en ninguna parte. ¿Alguien sabe cómo puedo hacer esto? Tendré muchos bares, así que el eje x estará desordenado y un poco desordenado si los demuestro allí solo.

Answer 1

Paso por 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.

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

Answer 2

No importa, hice una rotunda manera de crear mi propia información sobre herramientas mediante jquery.

Dejé mi configuración de resaltador como estaban en mi pregunta (aunque probablemente no necesites las sugerencias).

En mi archivo js después de configurar el gráfico de barras (después de $.jqplot('chart', ...) configuré un enlace con el mouse sobre el mouse, como muestran algunos de los ejemplos. He modificado de esta manera:

$('#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 anteriormente, que contiene las cadenas eje x garrapata. El data de jqplot tiene los datos actuales debajo del mouse como una matriz de tipo [x-category- #, y-value]. pointIndex tiene el actual # de barra resaltado. Básicamente, usaremos esto para obtener la cadena de ticks.

Luego diseñé la información sobre herramientas para que aparezca cerca del lugar donde se encuentra el cursor del mouse. Probablemente necesite restar un poco de mouseX y mouseY si este div está en otros contenedores posicionados.

a continuación, puede estilo #chartpseudotooltip en su CSS. Si desea los estilos predeterminados, simplemente puede agregarlo al .jqplot-highlighter-tooltip en el jqplot.css.

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

Answer 3

estoy usando la versión del plug-in rotulador 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 e la información sobre herramientas aparecerá. Prefiero colocarlo en la esquina superior izquierda para evitar problemas al cambiar el tamaño del contenedor div.