Morris graphiques. Des info-bulle lorsque hover

Je suis en utilisant morris.js (qui a une dépendance sur raphaël) pour la création de graphiques à barres empilées. Pour chaque diagramme à barres empilées, je veux montrer la répartition de différents niveaux dans la barre d'info-bulle. J'ai essayé d'utiliser le hoverCallback: mais il ne semble pas me donner le contrôle sur l'élément particulier je suis planant au-dessus. Je ne reçois que le contenu de cette barre.

J'ai mis un JSBIN exemple pour la même chose ici:

Lorsque vous passez la souris sur la barre, il montre de l'index de la barre en bas. Je veux afficher le contenu comme un outil de pointe au lieu.JSBIN exemple

Vous avez un typo dans votre JSBIN exemple. $(#row-content") manque un " la fixation de votre faute de frappe, je peux voir les graphiques, cependant lorsque vous passez la souris sur les barres, je ne vois pas où il montre l'indice de la barre en bas.

OriginalL'auteur Varun Jain | 2013-11-05

  1. 23

    Morceau de gâteau. Démo et code:

    <script type="text/javascript">
Morris.Bar({
    element: 'bar-example',
    data: [
        {y: '2006',a: 100,b: 90}, 
        {y: '2007',a: 75,b: 65}, 
        {y: '2008',a: 50,b: 40}, 
        {y: '2009',a: 75,b: 65}, 
        {y: '2010',a: 50,b: 40}, 
        {y: '2011',a: 75,b: 65}, 
        {y: '2012',a: 100,b: 90}
    ],
    hoverCallback: function(index, options, content) {
        return(content);
    },
    xkey: 'y',
    ykeys: ['a', 'b'],
    stacked: true,
    labels: ['Series A', 'Series B'] //rename it for the 'onhover' caption change
});
</script>

    UPD:

    Pour le vol de l'étiquette, vous devez ajouter Morris feuille de style CSS pour le code - démo

    REMARQUE IMPORTANTE

    Vol étiquettes fonctionne depuis la version 0.4.3

    Hey Ruben, c'est le comportement par défaut. Je ne veux pas en ligne-le contenu de la div. C'était juste pour essayer de comprendre ce que les différents paramètres de la fonction de rappel de la contenir. Je veux que les données dans une info-bulle élément juste à côté de la souris.
    Avez-vous un CSS esquisse pour la bulle? Comment à ressembler exactement, car il peut changer le jeu. Est ok pour vous de simples rectangle ou il faut regarder comme la fantaisie de légende?
    Un rectangle régulier. Je peux le changer plus tard.
    Puis-je cacher datetime ou le format datetime quand hover ?
    merci pour la remarque sur le vol de l'étiquette c'est ce que je cherchais !!

    OriginalL'auteur Ruben Kazumov

  2. 6

    http://jsbin.com/finuqazofe/1/edit?html,js,sortie

    { y: ..., x: ..., label: "my own label"},'

...
Morris.Line({
    hoverCallback: function(index, options, content) {
        var data = options.data[index];
        $(".morris-hover").html('<div>Custom label: ' + data.label + '</div>');
    },
    ...
    other params
});

    OriginalL'auteur asdasd