Highcharts - Guide rapide
Highchartsest une bibliothèque de graphiques purement basée sur JavaScript destinée à améliorer les applications Web en ajoutant des fonctionnalités de création de graphiques interactives. Il prend en charge un large éventail de graphiques. Les graphiques sont dessinés à l'aide de SVG dans les navigateurs standard tels que Chrome, Firefox, Safari, Internet Explorer (IE). Dans l'ancien IE 6, VML est utilisé pour dessiner les graphiques.
Caractéristiques de la bibliothèque Highcharts
Parlons maintenant de quelques fonctionnalités importantes de la bibliothèque Highcharts.
Compatability - Fonctionne parfaitement sur tous les principaux navigateurs et plates-formes mobiles comme Android et iOS.
Multitouch Support - Prend en charge le multitouch sur les plates-formes à écran tactile comme Android et iOS.Idéal pour iPhone / iPad et téléphones intelligents / tablettes basés sur Android
Free to Use - Open source et est gratuit à utiliser à des fins non commerciales.
Lightweight - La bibliothèque principale de highcharts.js, d'une taille de près de 35 Ko, est une bibliothèque extrêmement légère.
Simple Configurations - Utilise json pour définir diverses configurations des graphiques et très facile à apprendre et à utiliser.
Dynamic - Permet de modifier le graphique même après la génération du graphique.
Multiple axes- Non limité aux axes x, y. Prend en charge plusieurs axes sur les graphiques.
Configurable tooltips- L'info-bulle survient lorsqu'un utilisateur survole n'importe quel point d'un graphique. Highcharts fournit un formateur intégré d'info-bulle ou un formateur de rappel pour contrôler l'info-bulle par programme.
DateTime support- Manipulez la date et l'heure spécialement. Fournit de nombreux contrôles intégrés sur les catégories par date.
Export - Exportez le graphique au format PDF / PNG / JPG / SVG en activant la fonction d'exportation.
Print - Imprimer le graphique en utilisant la page Web.
Zoomablity - Prend en charge le graphique de zoom pour afficher les données plus précisément.
External data- Prend en charge le chargement dynamique des données à partir du serveur. Fournit un contrôle sur les données à l'aide des fonctions de rappel.
Text Rotation - Prend en charge la rotation des étiquettes dans n'importe quelle direction.
Types de graphiques pris en charge
La bibliothèque Highcharts fournit les types de graphiques suivants:
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Line Charts Utilisé pour dessiner des graphiques basés sur des lignes / splines. |
| 2 | Area Charts Utilisé pour dessiner des graphiques par zone. |
| 3 | Pie Charts Utilisé pour dessiner des graphiques à secteurs. |
| 4 | Scatter Charts Utilisé pour dessiner des graphiques dispersés. |
| 5 | Bubble Charts Utilisé pour dessiner des graphiques à bulles. |
| 6 | Dynamic Charts Utilisé pour dessiner des graphiques dynamiques où l'utilisateur peut modifier les graphiques. |
| sept | Combinations Utilisé pour dessiner des combinaisons de divers graphiques. |
| 8 | 3D Charts Utilisé pour dessiner des graphiques 3D. |
| 9 | Angular Gauges Utilisé pour dessiner des graphiques de type de compteur de vitesse. |
| dix | Heat Maps Utilisé pour dessiner des cartes thermiques. |
| 11 | Tree Maps Utilisé pour dessiner des cartes d'arbre. |
Dans nos chapitres suivants, nous discuterons de chaque type de graphiques mentionnés ci-dessus en détail avec des exemples.
Licence
Highcharts est open source et peut être utilisé gratuitement à des fins non commerciales. Pour utiliser Highcharts dans des projets commerciaux, suivez le lien - Licence et tarifs
Dans ce chapitre, nous verrons comment configurer la bibliothèque Highcharts à utiliser dans le développement d'applications Web.
Highcharts nécessite jQuery comme dépendance. Tout d'abord, nous allons installer la bibliothèque jQuery, puis la bibliothèque Highcharts.
Installez jQuery
Il existe deux façons d'utiliser jQuery.
Download- Téléchargez-le localement sur jQuery.com et utilisez-le.
CDN access- Vous avez également accès à un CDN. Le CDN vous donnera accès dans le monde entier à des centres de données régionaux; dans ce cas, l'hôte Google. Cela signifie que l'utilisation de CDN déplace la responsabilité de l'hébergement des fichiers de vos propres serveurs vers une série de serveurs externes. Cela offre également un avantage: si le visiteur de votre page Web a déjà téléchargé une copie de jQuery à partir du même CDN, il n'aura pas à être retéléchargé.
Utilisation de jQuery téléchargé
Incluez le fichier JavaScript jQuery dans la page HTML à l'aide du script suivant -
<head>
<script src = "/jquery/jquery.min.js"></script>
</head>Utiliser CDN
Nous utilisons les versions CDN de la bibliothèque jQuery tout au long de ce didacticiel.
Incluez le fichier JavaScript jQuery dans la page HTML à l'aide du script suivant -
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
</head>Installer Highcharts
Voici les deux façons d'utiliser Highcharts.
Download - Téléchargez-le localement depuis
CDN access- Vous avez également accès à un CDN. Le CDN vous donnera accès dans le monde entier à des centres de données régionaux; dans ce cas, l'hôte Highcharts - Code.Highcharts.Com.
Utilisation des Highcharts téléchargés
Incluez le fichier JavaScript Highcharts dans la page HTML à l'aide du script suivant -
<head>
<script src = "/highcharts/highcharts.js"></script>
</head>Utiliser CDN
Nous utilisons les versions CDN de la bibliothèque Highcharts tout au long de ce didacticiel.
Incluez le fichier JavaScript Highcharts dans la page HTML à l'aide du script suivant -
<head>
<script src = "https://code.highcharts.com/highcharts.js"></script>
</head>Dans ce chapitre, nous présenterons la configuration requise pour dessiner un graphique à l'aide de l'API Highcharts.
Étape 1: créer une page HTML
Créez une page HTML avec les bibliothèques javascript jQuery et Highcharts.
HighchartsTestHarness.htm
<html>
<head>
<title>Highcharts Tutorial</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src = "https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
<script language = "JavaScript">
$(document).ready(function() {
});
</script>
</body>
</html>Ici le container div est utilisé pour contenir le graphique dessiné à l'aide de la bibliothèque Highcharts.
Étape 2: créer des configurations
La bibliothèque Highcharts utilise des configurations très simples utilisant la syntaxe json.
$('#container').highcharts(json);Ici, json représente les données et la configuration json que la bibliothèque Highcharts utilise pour dessiner un graphique dans le conteneur div en utilisant la méthode highcharts (). Maintenant, nous allons configurer les différents paramètres pour créer la chaîne json requise.
Titre
Configurez le titre du graphique.
var title = {
text: 'Monthly Average Temperature'
};Sous-titre
Configurez le sous-titre du graphique.
var subtitle = {
text: 'Source: WorldClimate.com'
};xAxis
Configurez le ticker à afficher sur l'axe X.
var xAxis = {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'
,'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};yAxis
Configurez le titre, tracez les lignes à afficher sur l'axe Y.
var yAxis = {
title: {
text: 'Temperature (\xB0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};info-bulle
Configurez l'info-bulle. Mettez le suffixe à ajouter après la valeur (axe des y).
var tooltip = {
valueSuffix: '\xB0C'
}Légende
Configurez la légende à afficher sur le côté droit du graphique avec d'autres propriétés.
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
};séries
Configurez les données à afficher sur le graphique. Series est un tableau où chaque élément de ce tableau représente une seule ligne sur le graphique.
var series = [
{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
},
{
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
},
{
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
},
{
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}
];Étape 3: créer les données JSON
Combinez toutes les configurations.
var json = {};
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;Étape 4: dessinez le graphique
$('#container').highcharts(json);Exemple
Prenons l'exemple suivant pour mieux comprendre la syntaxe de configuration -
highcharts_configuration.htm
<html>
<head>
<title>Highcharts Tutorial</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src = "https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
<script language = "JavaScript">
$(document).ready(function() {
var title = {
text: 'Monthly Average Temperature'
};
var subtitle = {
text: 'Source: WorldClimate.com'
};
var xAxis = {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};
var yAxis = {
title: {
text: 'Temperature (\xB0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};
var tooltip = {
valueSuffix: '\xB0C'
}
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
};
var series = [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
26.5, 23.3, 18.3, 13.9, 9.6]
},
{
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
24.1, 20.1, 14.1, 8.6, 2.5]
},
{
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
17.9, 14.3, 9.0, 3.9, 1.0]
},
{
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0,
16.6, 14.2, 10.3, 6.6, 4.8]
}
];
var json = {};
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>Résultat
Vérifiez le résultat.
Les graphiques en courbes sont utilisés pour dessiner des graphiques basés sur des lignes / splines. Dans cette section, nous aborderons les différents types de graphiques basés sur des lignes et des splines.
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Ligne de base Graphique linéaire de base. |
| 2 | Avec des étiquettes de données Graphique avec étiquettes de données. |
| 3 | Données chargées Ajax, points cliquables Graphique dessiné après avoir récupéré les données du serveur. |
| 4 | Série chronologique, zoomable Graphique avec séries chronologiques. |
| 5 | Spline avec axes inversés Diagramme spline ayant des axes inversés. |
| 6 | Spline avec symboles Diagramme spline utilisant des symboles de chaleur / pluie. |
| sept | Spline avec bandes de tracé Diagramme spline avec bandes de tracé. |
| 8 | Données de temps à intervalles irréguliers Graphique d'un grand ensemble de données temporelles. |
| 9 | Axe logarithmique Graphique illustrant l'axe logarithmique. |
Les graphiques en aires sont utilisés pour dessiner des graphiques en zones. Dans cette section, nous discuterons des différents types de graphiques basés sur des zones.
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Zone de base Graphique à aires de base. |
| 2 | Zone avec des valeurs négatives Graphique en aires ayant des valeurs négatives. |
| 3 | Zone empilée Graphique ayant des zones empilées les unes sur les autres. |
| 4 | Zone de pourcentage Graphique avec données en pourcentage. |
| 5 | Zone avec des points manquants Graphique avec des points manquants dans les données. |
| 6 | Axes inversés Zone utilisant des axes inversés. |
| sept | Zone-spline Graphique en aires utilisant une spline. |
| 8 | Gamme de zone Graphique en aires utilisant des plages. |
| 9 | Gamme de zone et ligne Graphique en aires utilisant la plage et la ligne. |
Les graphiques à barres sont utilisés pour dessiner des graphiques basés sur des zones. Dans cette section, nous aborderons les différents types de graphiques à barres.
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Barre de base Graphique à barres de base. |
| 2 | Barre empilée Diagramme à barres ayant des barres empilées les unes sur les autres. |
| 3 | Zone empilée négative Graphique à barres avec pile négative. |
Les graphiques à colonnes sont utilisés pour dessiner des graphiques basés sur des colonnes. Dans cette section, nous aborderons les différents types de graphiques basés sur des colonnes.
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Colonne de base Graphique à colonnes de base. |
| 2 | Colonne avec des valeurs négatives Histogramme ayant des valeurs négatives. |
| 3 | Colonne empilée Graphique ayant des colonnes empilées les unes sur les autres. |
| 4 | Colonne empilée et groupée Graphique avec colonne sous forme empilée et groupée. |
| 5 | Colonne avec pourcentage empilé Graphique avec pourcentage empilé. |
| 6 | Colonne avec étiquettes pivotées Graphique à colonnes avec étiquettes pivotées dans les colonnes. |
| sept | Colonne avec exploration Diagramme à colonnes avec capacité d'exploration. |
| 8 | Colonne à placement fixe Diagramme à colonnes avec placement fixe. |
| 9 | Données définies dans le tableau HTML Graphique à colonnes utilisant les données définies dans le tableau HTML. |
| dix | Gamme de colonnes Graphique à colonnes utilisant des plages. |
Les graphiques à secteurs sont utilisés pour dessiner des graphiques à secteurs. Dans cette section, nous discuterons des différents types de graphiques à secteurs.
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Tarte de base Graphique à secteurs de base. |
| 2 | Tarte aux légendes Graphique à secteurs avec légendes. |
| 3 | Graphique en anneau Graphique en anneau. |
| 4 | Demi-cercle Donut Graphique en demi-cercle en anneau. |
| 5 | Tarte avec drill down Diagramme à secteurs avec capacité d'exploration. |
| 6 | Graphique à secteurs avec dégradé Graphique à secteurs avec remplissage dégradé. |
| sept | Camembert avec monochrome Camembert avec remplissage monochrome. |
Les graphiques en nuages de points sont utilisés pour dessiner des graphiques basés sur des nuages de points. Dans cette section, nous discuterons des différents types de graphiques basés sur des nuages de points.
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Diagramme de dispersion Diagramme de dispersion. |
Les graphiques à bulles sont utilisés pour dessiner des graphiques à bulles. Dans cette section, nous discuterons des différents types de graphique (s) à bulles.
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Graphique à bulles Graphique à bulles. |
| 2 | Graphique à bulles 3D Graphique à bulles 3D. |
Les graphiques dynamiques sont utilisés pour dessiner des graphiques basés sur des données où les données peuvent changer après le rendu du graphique. Dans cette section, nous aborderons les différents types de graphiques dynamiques.
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Spline mise à jour chaque seconde Le diagramme spline est mis à jour chaque seconde. |
| 2 | Cliquez pour ajouter un point Graphique avec capacité d'ajout de points. |
Les graphiques combinés sont utilisés pour dessiner des graphiques mixtes; par exemple, un graphique à barres avec un graphique à secteurs. Dans cette section, nous aborderons les différents types de graphiques de combinaisons.
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Colonne, ligne et tarte Graphique avec colonne, ligne et secteur. |
| 2 | Deux axes, ligne et colonne Graphique avec deux axes, ligne et colonne. |
| 3 | Plusieurs axes Graphique ayant plusieurs axes. |
| 4 | Dispersion avec ligne de régression Diagramme de dispersion avec ligne de régression. |
Les graphiques 3D sont utilisés pour dessiner des graphiques en 3 dimensions. Dans cette section, nous aborderons les différents types de graphiques 3D.
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Colonne 3D Diagramme à colonnes 3D. |
| 2 | Colonne 3D avec null Histogramme 3D avec valeurs nulles et 0. |
| 3 | Colonne 3D avec empilement Histogramme 3D avec empilement et regroupement. |
| 4 | Tarte 3D Graphique à secteurs 3D. |
| 5 | Donut 3D Graphique en anneau 3D. |
Les graphiques de jauges angulaires sont utilisés pour dessiner des graphiques de type mètre / jauge. Dans cette section, nous discuterons des différents types de graphiques de jauges angulaires.
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Jauge angulaire Tableau de jauge angulaire. |
| 2 | Jauge solide Graphique à jauge solide. |
| 3 | L'horloge L'horloge. |
| 4 | Jauge à deux axes Gauge Chart avec deux axes. |
| 5 | VU mètre Tableau des compteurs VU. |
Les graphiques Heat Map sont utilisés pour dessiner des graphiques de type Heat Map. Dans cette section, nous aborderons les différents types de cartes thermiques.
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Carte de chaleur Carte de chaleur. |
| 2 | Grande carte thermique Grande carte de chaleur. |
Les graphiques Tree Map sont utilisés pour dessiner des graphiques de type Tree Map. Dans cette section, nous aborderons les différents types d'arborescences.
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Carte d'arbre Carte d'arbre avec axe de couleur. |
| 2 | Carte d'arbre avec niveaux Carte d'arbre avec des niveaux. |
| 3 | Carte des grands arbres Carte du grand arbre. |