20 votos

Flot Gráfico de Barras Apiladas y visualización de los valores de la barra en el mouse encima

Estoy tratando de comprender la descripción de la funcionalidad de Flot, pero no realmente conseguir mi cabeza alrededor de ella!

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

Podría alguien ser capaz de apuntar hacia mi un ejemplo de esto o de proporcionar el código para hacerlo?

21voto

Peter Hilton Puntos 10580

El siguiente código funciona para mi Flot gráfico de barras apiladas, basado en la Flot ejemplo que muestra los datos del punto de asomar. El truco es que el 'elemento' valores en el gráfico apilado son acumulativos, por lo que la 'y' valor mostrado en la punta de la herramienta primero tiene que restar 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 he podido encontrar esto en la Flot documentación, pero el item.datapoint matriz parecía contener todo lo necesario en la práctica.

1voto

Thomas Puntos 31

El código de arriba causado redibujar-problemas para mí. Aquí es una mejora en el código:

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

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X