javascript - bootstrap - jquery flot chart

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

Question

Estoy usando el jquery plugin 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 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

Estoy usando la versión del complemento resaltador 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 sobre herramientas. Prefiero colocarlo en la esquina superior izquierda para evitar problemas al cambiar el tamaño del contenedor div.

Answer 2

No importa, hice una forma indirecta 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 en el mouse sobre el mouse, como muestran 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á definido previamente y contiene las cadenas de ticks del eje x. Los data de jqplot tienen los datos actuales debajo del mouse como una matriz de tipo [x-category- #, y-value]. pointIndex tiene el actual # de barra resaltada. Básicamente, usaremos esto para obtener la cadena de ticks.

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

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

Espero que esto sea útil para otros.

Answer 3

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.

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