javascript - content - Flotar gráfico de barras apiladas y mostrar los valores de barras con el mouse sobre

jquery flot grid

Question

Estoy tratando de entender la funcionalidad de información sobre herramientas de Flot, ¡pero en realidad no estoy tratando de entenderlo!

Estoy tratando de lograr una información sobre herramientas que muestre la etiqueta y el valor de cada sección de un gráfico de barras apiladas

¿Alguien podría apuntar hacia un ejemplo de esto o proporcionar un código para hacerlo?

Answer 1

El código anterior causó problemas de redibujado para mí. Aquí hay un código mejorado:

var previousPoint = [0,0,0];
$("#regionsChart").bind("plothover", function (event, pos, item) {
    if (item) {
        if (previousPoint[0] != item.datapoint[0]
            || previousPoint[1] != item.datapoint[1]
            || previousPoint[2] != item.datapoint[2]
        ) {
            previousPoint = item.datapoint;

            $("#tooltip").remove();
            var x = item.datapoint[0],
                y = item.datapoint[1] - item.datapoint[2];

            showTooltip(item.pageX, item.pageY, item.series.label + " " + y.toFixed(0) );
        }
    }
    else {
        $("#tooltip").remove();
        previousPoint = [0,0,0];
    }
});

Answer 2

El siguiente código funciona para mi gráfico de barras apiladas de Flot, basado en el ejemplo de Flot que muestra la posición del punto de datos. El truco es que los valores de ''elemento'' en el gráfico apilado son acumulativos, por lo que el valor de ''y'' que se muestra en la información sobre herramientas tiene que sustraer primero el punto de datos para las barras debajo.

var previousPoint = null;
$("#chart").bind("plothover", function (event, pos, item) {
    if (item) {
        if (previousPoint != item.datapoint) {
            previousPoint = item.datapoint;

            $("#tooltip").remove();
            var x = item.datapoint[0],
                y = item.datapoint[1] - item.datapoint[2];

            showTooltip(item.pageX, item.pageY, y + " " + item.series.label);
        }
    }
    else {
        $("#tooltip").remove();
        previousPoint = null;            
    }
});

No encontré esto en la documentación de Flot, pero la matriz item.datapoint parecía contener lo que necesitaba en la práctica.

Answer 3

Esto es lo mismo que Thomas arriba, excepto que cambié la descripción para evitar que bloquee la acción de desplazamiento.

var previousPoint = [0,0,0];
$("#regionsChart").bind("plothover", function (event, pos, item) {
    if (item) {
        if (previousPoint[0] != item.datapoint[0]
            || previousPoint[1] != item.datapoint[1]
            || previousPoint[2] != item.datapoint[2]
        ) {
            previousPoint = item.datapoint;

            $("#tooltip").remove();
            var x = item.datapoint[0],
                y = item.datapoint[1] - item.datapoint[2];

            showTooltip(item.pageX, item.pageY - 35, item.series.label + " " + y.toFixed(0) );
        }
    }
    else {
        $("#tooltip").remove();
        previousPoint = [0,0,0];
    }
});

Answer 4

La solución está utilizando tooltipOpts -> método de contenido con una función de devolución de llamada para devolver correctamente los datos dinámicos a la etiqueta.

Me di cuenta de que pasar un cuarto argumento a la función de devolución de llamada de "tooltipOpts" en realidad te da todo el objeto de datos a partir del cual se construye el gráfico / gráfico. Desde aquí, puede extraer fácilmente las etiquetas del eje X, utilizando el segundo argumento de esta misma función que el índice de la etiqueta para extraer.

EJEMPLO:

Objeto de datos que estoy pasando a la función de trama:

[
    { data: [[1,137],[2,194],[3,376],[4,145],[5,145],[6,145],[7,146]] }
],
{
    bars: { show: true, fill: true, barWidth: 0.3, lineWidth: 1, fillColor: { colors: [{ opacity: 0.8 }, { opacity: 1}] }, align: ''center'' },
    colors: [''#fcc100''],
    series: { shadowSize: 3 },
    xaxis: {
        show: true,
        font: { color: ''#ccc'' },
        position: ''bottom'',
        ticks: [[1,''Thursday''],[2,''Friday''],[3,''Saturday''],[4,''Sunday''],[5,''Monday''],[6,''Tuesday''],[7,''Wednesday'']]
    },
    yaxis:{ show: true, font: { color: ''#ccc'' }},
    grid: { hoverable: true, clickable: true, borderWidth: 0, color: ''rgba(120,120,120,0.5)'' },
    tooltip: true,
    tooltipOpts: {
        content: function(data, x, y, dataObject) {
            var XdataIndex = dataObject.dataIndex;
            var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label;
            return y + '' stories created about your page on '' + XdataLabel
        },
        defaultTheme: false,
        shifts: { x: 0, y: -40 }
    }
}

Gráfico de barras renderizado desde el objeto de datos anterior:

Como puede ver en la vista previa de la imagen, la lógica utilizada para representar el contenido de la etiqueta de forma dinámica a partir de los datos reales es esta:

tooltipOpts: {
    content: function(data, x, y, dataObject) {
        var XdataIndex = dataObject.dataIndex;
        var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label;
        return y + '' stories created about your page on '' + XdataLabel;
    },
    defaultTheme: false,
    shifts: { x: 0, y: -40 }
}