✅ Graphiques interactifs avec JavaScript et Highcharts

Table des matières

Highcharts est une bibliothèque écrite en HTML5 et en Javascript pur :

Voyons comment cela fonctionne, comment il est structuré et comment le mettre en œuvre sur notre site Web.
Structure du répertoire
D'abord, nous téléchargeons le zip qui contient notre bibliothèque, nous le décompressons et nous pouvons voir notre répertoire de fichiers et comment il est structuré.

Voyons ce que chaque répertoire contient et à quoi il sert :

index.html: Il s'agit de la page de test HTML, avec laquelle vous pouvez faire des tests et afficher les options par défaut.
exemples: Ce dossier contient tout le code source des exemples.
graphique: Ce dossier contient les images utilisées dans les exemples.
serveur d'exportation: Il s'agit d'un répertoire qui contient la fonction côté serveur pour exporter les graphiques vers une image.
js: Ceci est le répertoire principal de Highcharts. Chaque fichier Javascript a deux suffixes, le premier .src.js est celui qui contient le code source avec des commentaires et l'autre .js en est la version réduite.
adaptateurs: Voici les plugins pour pouvoir utiliser Mootools ou alors Prototype en tant que frameworks, au sein de ce répertoire se trouve ce qui suit :

exportation.js: ce fichier nous donne des fonctions à exporter et à imprimer.

thèmes: ce dossier contient une série de fichiers Javascript prédéfinis avec des paramètres tels que la couleur d'arrière-plan, les styles, entre autres. Nous pouvons charger un de ces fichiers dans les graphiques pour différents styles.

En voyant comment fonctionne cette bibliothèque et comment elle est organisée, passons à un exemple pratique de mise en œuvre Highcharts sur notre site Web.

Nous incluons d'abord les bibliothèques du Highcharts, ainsi que les bibliothèques de jQuery pour des fonctionnalités supplémentaires :

 Highcharts premier exemple

Le diagramme de courbes est défini dans la spécification de l'objet qui contient toutes les propriétés et les séries de données.

 var chart = new Highcharts.Chart ({chart : {…}, titre : '…'…});

Une fois cet objet créé, le graphique est affiché dans le navigateur, au sein de cet objet, il y a une série d'options que nous expliquerons ci-dessous.
L'instruction renduVers indique à Highcharts d'afficher un graphique dans le HTML, en particulier dans leavec lui id = "conteneur". L'option taper définit le type de graphe, les options peuvent être : aire, ligne, spline, etc. Dans cet exemple, nous utiliserons spline.

 graphique : {renderTo : 'container', tapez : 'spline'}

Ensuite, nous avons défini un titre et un sous-titre, qui apparaîtront en haut du graphique.

 titre : {texte : 'Navigateurs Web …'}, sous-titre : {texte : 'De 2008 à aujourd'hui'},

Au choix des catégories dans la propriété du xAxe contient un tableau avec les étiquettes de chaque entrée de données et avec tickIntervalles Nous séparons la façon dont ces étiquettes sont imprimées.

 Axe x : {catégories : ['Jan 2008', 'Fév',…. ], cochezIntervalle : 3},

Les options sur la propriété axe y Ils nous permettent d'attribuer le titre de cet axe et de définir la valeur minimale et maximale dans laquelle nous limiterons notre graphique.

 Axe y : {titre : {texte : 'Pourcentage %'}, min : 0},

La propriété de plotOptions C'est lui qui contrôle la manière dont chaque série de données sera affichée en fonction du type de graphique.

 plotOptions : {série : {lineWidth : 2}},

La propriété series est le centre de l'ensemble de l'objet de configuration qui définit les données qui alimenteront le graphe.

 série : [{nom : 'Internet Explorer', données : [54.7, 54.7, 53.9, 54.8, 54.4,…]}, {nom : 'FireFox', données : [36.4, 36.5, 37.0, 39.1, 39.8,…] }, {

Maintenant que toutes les parties du code sont expliquées, voyons à quoi cela ressemblerait dans notre navigateur.

Enfin je laisse le code complet pour que vous puissiez le tester par vous-même et sans oublier qu'il peut être personnalisé pour l'adapter à n'importe quel besoin.