.. meta:: :description lang=fr: Démo de l'intégration de JQuery SparkLine à Sphinx :description lang=en: Démo of JQuery SparkLine with Sphinx ################################### Démonstration de JQuery SparkLine ################################### .. include:: .javascript.fr.rst --------------------------------------------------------------------- À-propos -------- Cette page est là pour présenter l'utilisation de `JQuery SparkLine `_ dans des pages webs générées avec `Sphinx `_. .. sidebar:: Retourner à l'accueil Si cette page ne vous intéresse pas, allez plutôt consulter `celle là `_. --------------------------------------------------------------------- Des graphiques intégrés dans la page ------------------------------------ Importer le script ^^^^^^^^^^^^^^^^^^ Il faut d'abord charger la bibliothèque `jquery `_, et ensuite le script `jquery.sparkline.js <_static/jquery.sparkline.min.js>`_, avec une balise ``.. raw:: html`` et la commande *HTML* ````. .. raw:: html Déclarer les graphiques ^^^^^^^^^^^^^^^^^^^^^^^ Encore avec une balise ``.. raw:: html`` en *rST* et la commande *HTML* ``"``. On en génère 4, comme dans l'exemple sur la `page de doc `_. .. raw:: html Afficher les graphiques ^^^^^^^^^^^^^^^^^^^^^^^ Toujours pareil, on utilise ``.. raw:: html`` en *rST* pour inclure du code *HTML* (voir la source de cette page, `sparkline.rst `_). .. raw:: html

Inline Sparkline: 1,4,4,7,5,9,10.

Sparkline with dynamic data: Loading..

Bar chart with dynamic data: Loading..

Bar chart with inline data: 1,3,4,5,3,5

Et voilà ! ^^^^^^^^^^ Ça devrait marcher :) --------------------------------------------------------------------- Un exemple plus sympa --------------------- On va essayer un exemple **plus intéressant** ? .. warning:: Le script plante parfois… .. raw:: html Mouse speed Loading…. Un autre exemple ---------------- J'ai essayé d'utiliser des données générées par Google Analytics pour afficher un petit graphique d'activité sur le site sur les derniers jours, mais **sans succès :(** ! .. seealso:: `WakaTime `_ --------------------------------------------------------------------- Comment ça marche ? ------------------- Plus de détails sur ``_. .. (c) Lilian Besson, 2011-2019, https://bitbucket.org/lbesson/web-sphinx/