jQuery Girl
  1. jQuery Girl
  3. utiliser plusieurs étiquettes avec le plugin tooltip
Intereting Posts
comment obtenir la valeur du plugin autosuggest Fondu enchaîné des images dans jQuery Comment puis-je télécharger une image jpg comme un fichier pdf? Utilisation de la fonction jQuery dans le contrôleur AngularJS clone google map instance Problème avec jquery lavalamp jQuery UI déplaçable et ajout de la classe sur l’événement glisser Définition de la valeur d’entrée masquée sur un blob à soumettre à l’aide de la méthode du formulaire Dynamic Jquery Splitter Plugin Faites glisser les divs de l’écran en utilisant jQuery + des flèches de navigation ajoutées ID et classe séparés pour JS et CSS Désactivation de l’élément sélectionné lorsque la case à cocher est cochée avec jQuery Comment trouver les coordonnées de la souris (problème avec setTimeout)? Obtenir la valeur d’une zone de texte lors d’un événement coupé Je ne parviens pas à envoyer les données complètes du formulaire avec ng-submit. Les données div ajoutées sont envoyées comme non définies

utiliser plusieurs étiquettes avec le plugin tooltip

J’essaie de créer une chronologie généalogique avec jquery.flot. Je souhaite afficher la bonne étiquette lorsque je survole un point, c’est-à-dire que lorsque je survole le sharepoint mariage d’une personne, l’étiquette “mariage – date du mariage” apparaît. Mais visiblement, je ne suis pas en mesure de construire un tableau d’étiquettes, car il est possible de le faire pour les données.

Juste un peu du code: 

 
 
  $ (function () {var data = [{label : [["Naissance de Pierre MARTIN (1756)"], ["Mariage de Pierre MARTIN (1781)"], ["Mort Pierre MARTIN (1812)"], données: [[1756, 20.0], [1781, 20.0] , [1812, 20.0]]}, {label: [["Naissance Marie DUPONT (1761)"], ["Mariage Marie DUPONT (1781)"], ["Mort Marie DUPONT (1833)"], données: [ [1761, 19.0], [1781, 19.0], [1833, 19.0]]}, {label: [["Birth Charles MARTIN (1782)"], ["Mariage Charles MARTIN (1810)"], ["Death Charles MARTIN (1855) "]], données: [[1782, 18.0], [1810, 18.0], [1855, 18.0]]}, {label: [[" Birth Catherine MARTIN (1790) "], [" Mariage Catherine MARTIN (1810) "], [" Death Catherine MARTIN (1868) "]], données: [[1790, 17.0], [1810, 17.0], [1868, 17.0]]}, {label: [[" Birth Louis MARTIN (1813) "], [" Death Louis MARTIN (1876) "]], données: [[1813, 16.0], [1876, 16.0]]]]; var options = {séries: {lignes: {show: true , lineWidth: 5}, points: {show: true, r  adius: 4}}, légende: {show: false}, xaxis: {min: 1745, max: 1885, tickDécimales: 0, ticks: [[1750, "1750"], [1760, "1760"], [1770 "1770"], [1780, "1780"], [1790, "1790"], [1800, "1800"], [1810, "1810"], [1820, "1820"], [1830, " 1830 "], [1840," 1840 "], [1850," 1850 "], [1860," 1860 "], [1870," 1870 "], [1880," 1880 "]], yaxis: {show : vrai, couleur: null, min: 14, max: 22, ticks: [[20, " Pierre MARTIN (1756-1812)", [19, " Marie DUPONT (1761-1833)"], [18, " Charles MARTIN (1782-1855) "], [17," Catherine MARTIN (1790-1868) "], [16," Louis MARTIN (1813-1876) "]]}, sélection: {mode:" x "}, grid: {borderWidth: 2, cliquable: true, passable: true, autoHighlight: true}};  var placeholder = $ ("# placeholder");  placeholder.bind ("plotselected", fonction (événement, plages) {$ ("# sélection"). text (plages.xaxis.from.toFixed (1) + "à" + plages.xaxis.to.toFixed (1) ); var zoom = $ ("# zoom"). attr ("coché"); if (zoom) plot = $ .plot (espace réservé, données, $ .extend (true, {}, options, {xaxis: {min : plages.xaxis.from, max: plages.xaxis.to}}));});  placeholder.bind ("plotunselected", fonction (événement) {$ ("# sélection"). text ("");});  var plot = $ .trot (espace réservé, données, options);  $ ("# clearSelection"). click (function () {plot.clearSelection ();});  function showTooltip (x, y, contenu) {$ ('' + contenus + '') .css ({position: 'absolute', affichage: 'none', haut: y + 5, gauche: x + 5, bordure: '1px solid #fdd', remplissage: '2px', 'background-color': '#eef', opacité: 0,80}). AppendTo ("body"). FadeIn (20);  } var previousPoint = null;  $ ("# placeholder"). bind ("plothover", fonction (event, pos, item) {$ ("# x"). text (pos.x.toFixed (2)); $ ("# y") .text (pos.y.toFixed (2)); if (item) {if (previousPoint! = item.datapoint) {previousPoint = item.datapoint; $ ("# tooltip"). remove (); var x = item .datapoint [0] .toFixed (2), y = item.datapoint [1] .toFixed (2); showTooltip (item.pageX, item.pageY, item.series.label);}} else {$ ("# info-bulle "). remove (); previousPoint = null;}});  });

Lorsque je survole le sharepoint mariage du graphique, au lieu d’afficher:

” Mariage Pierre MARTIN (1781) “,

Je reçois le tableau entier:

” Naissance Pierre MARTIN (1756) Mariage Pierre MARTIN (1781) Décès Pierre MARTIN (1812) “.

Vous pouvez voir mon exemple ici, pour être plus explicite (vous pouvez saisir le code):

démo de mon graphique chronologique

Est-il possible d’utiliser une étiquette par point sur le graphique? 

     Essai Flot tooltip      
Essai Flot tooltip

Notez que j’ai changé ceci: 

 showTooltip(item.pageX, item.pageY, item.series.label);

Pour ça: 

 showTooltip(item.pageX, item.pageY, item.series.label[item.dataIndex]);