Des exemples de Flot avec des info-bulles flottantes?

StackOverflow https://stackoverflow.com/questions/445482

Question

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 différentes manières de définir le survol sur le graphique, mais je ne suis pas sûr de ce que cela signifie exactement.

Je voudrais savoir si quelqu'un pourrait donner des exemples qu'ils ont rencontrés, ou même du code, qui illustrent l'un des exemples suivants:

  • Infobulles dynamiques déclenchées par le survol d'événements sur des éléments de graphique flottants
  • Cochez les info-bulles (survolez la xaxie pour afficher les détails)
  • Tout type de liaison survolée / dynamique d'événement utilisée w Flot

L’effet recherché est similaire à celui de this . Exemple d'ouverture d'un graphique Flash

Était-ce utile?

La solution

Jetez un coup d’œil à cet exemple de flot qui illustre les info-bulles des points de tracé de la graphique. (Assurez-vous de cocher la case Activer l'info-bulle .)

Autres conseils

Il existe également un plug-in simple pour les info-bulles, vous pouvez le trouver ici

Et j’ajoute aussi quelques fonctionnalités au plugin, vous pouvez les trouver sur github. https://github.com/skeleton9/flot.tooltip

http://data.worldbank.org est créé à l'aide de Flot et utilise des info-bulles.

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

Le seul paramètre qui doit être modifié lors de l'initialisation de la parcelle est dans l'objet options. Cela doit inclure cela parmi les options: 

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

Cette fonction construit et affiche l'élément d'info-bulle lorsqu'il est appelé. Les paramètres x et y sont des décalages à l'intérieur de la parcelle, de sorte que l'info-bulle 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);
    }

Ceci est la liaison, elle ne doit être appelée qu'une fois lorsque l'élément utilisé comme espace réservé pour flot est disponible. Il connecte le gestionnaire d'événement. 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;
        }
    });

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

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

http://craigsworks.com/projects/qtip2/demos/#flot est ma bibliothèque d’infos JS préférée. C'est un joli dur à cuire et une intégration sans faille.

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 l'exemple complet ici: afficher une info-bulle personnalisée lors du survol d'un point à flot

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top