web-dev-qa-db-fra.com

Des exemples de Flot avec des info-bulles flottantes?

Je travaille actuellement sur un graphique Flot , le API qui semble assez puissant dans l'ensemble, bien que les exemples d'utilisation avancée ne soient pas largement documentés .

L'API suggère qu'il existe des moyens de définir le survol sur le graphique, pas que je suis sûr de ce que cela signifie exactement que je peux faire avec.

J'aimerais savoir si quelqu'un pourrait fournir des exemples qu'ils ont rencontrés, ou coder d'ailleurs, qui illustrent des exemples de l'un des éléments suivants:

  • Infobulles dynamiques déclenchées par un survol des événements sur les éléments du graphique en courbes
  • Cochez les info-bulles (survoler le xaxis pour afficher les détails)
  • Tout type de liaison survolée/dynamique d'événement qui a été utilisée avec Flot

L'effet que je recherche est similaire à this Open Flash Chart example

javascriptjqueryjavascript-eventsflotgraphing
21
j pimmel

Jetez un oeil à cet exemple de flottement qui illustre les info-bulles pour les points de tracé sur le graphique. (Assurez-vous de cocher la case Activer l'info-bulle .)

48
Simon Lieschke

Il y a aussi un plugin simple pour les info-bulles, vous pouvez le trouver ici

Et j'ajoute également une fonctionnalité au plugin, vous pouvez le trouver sur github. https://github.com/skeleton9/flot.tooltip

11
Green Su

http://data.worldbank.org est construit en utilisant Flot et utilise des info-bulles.

9
Kyle Mathews

Le lien dans la réponse de Simon a très bien fonctionné pour fournir un crochet à utiliser avec les info-bulles flottantes. Cependant, j'ai constaté que je devais creuser et couper du code afin d'accomplir l'effet de survol. Voici le résultat (essentiellement mot pour mot de http://people.iola.dk/olau/flot/examples/interacting.html ).

Le seul paramètre qui doit changer dans l'initialisation du flot se trouve dans l'objet options. Il doit inclure cela comme l'une des options:

var options = {
 //... : {},
 grid: { hoverable: true }
};

Cette fonction construit et affiche l'élément info-bulle lors de son appel. Les paramètres x et y sont des décalages à l'intérieur du flot afin que l'infobulle se positionne correctement. Le contenu est ce qui est montré dans l'info-bulle

function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #fdd',
            padding: '2px',
            'background-color': '#fee'
        }).appendTo("body").fadeIn(200);
    }

Il s'agit de la liaison, elle ne doit être appelée qu'une seule fois lorsque l'élément utilisé comme espace réservé pour flot est disponible. Il connecte le gestionnaire d'événements. previousPoint est utilisé comme indicateur pour afficher l'info-bulle

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

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

                showTooltip(item.pageX, item.pageY, "(" + x + "," + y + ")");
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;
        }
    });
4
Travis J

Consultez cette bibliothèque pour l'intégration des info-bulles et des flots

https://github.com/krzysu/flot.tooltip

3
nitin

http://craigsworks.com/projects/qtip2/demos/#flot est ma bibliothèque d'info-bulles JS préférée. Son assez dur à cuire et a l'intégration de flot.

1
rynop

Vous pouvez ajouter des données personnalisées au tableau de données et l'utiliser pour afficher des info-bulles.

Voir ma réponse et un exemple complet ici: affichage d'une info-bulle personnalisée lorsque vous survolez un point du flot

1
Lasse Skindstad Ebert