Graphique.js
Graphique.js est une bibliothèque JavaScript gratuite pour créer des graphiques HTML. C’est l’une des bibliothèques de visualisation les plus simples pour JavaScript, et elle est livrée avec les types de graphiques intégrés suivants :
- Nuage de points
- Graphique en ligne
- Diagramme à bandes
- Diagramme circulaire
- Graphique en anneau
- Graphique à bulles
- Graphique en aires
- Carte radar
- Graphique mixte
Comment utiliser Chart.js ?
Chart.js est facile à utiliser.
D’abordajoutez un lien vers le CDN (Content Delivery Network) fournisseur :
Alorsajoutez un
L’élément canvas doit avoir un identifiant unique.
C’est tout!
Syntaxe typique des diagrammes à nuage de points :
const monGraphique = new Graphique(“monGraphique”, {
tapez : “dispersion”,
données: {},
option : {}
});
Syntaxe typique des graphiques en courbes :
const monGraphique = new Graphique(“monGraphique”, {
tapez : “ligne”,
données: {},
option : {}
});
Syntaxe type d’un graphique à barres :
const monGraphique = new Graphique(“monGraphique”, {
taper : “barre”,
données: {},
option : {}
});
Nuages de points
Prix des maisons par rapport à la taille
Code source
const Valeursxy = [
{x:50, y:7},
{x:60, y:8},
{x:70, y:8},
{x:80, y:9},
{x:90, y:9},
{x:100, y:9},
{x:110, y:10},
{x:120, y:11},
{x:130, y:14},
{x:140, y:14},
{x:150, y:15}
];
nouveau Graphique(“monGraphique”, {
tapez : “dispersion”,
données: {
ensembles de données : [{
pointRadius: 4,
pointBackgroundColor: “rgba(0,0,255,1)”,
data: xyValues
}]
},
option :{…}
});
Essayez-le vous-même »
Graphiques linéaires
Prix des maisons par rapport à la taille
Code source
const xValeurs = [50,60,70,80,90,100,110,120,130,140,150];
const yValeurs = [7,8,8,9,9,9,10,11,14,14,15];
nouveau Graphique(“monGraphique”, {
tapez : “ligne”,
données: {
libellés : xValeurs,
ensembles de données : [{
backgroundColor:”rgba(0,0,255,1.0)”,
borderColor: “rgba(0,0,255,0.1)”,
data: yValues
}]
},
option :{…}
});
Essayez-le vous-même »
Si vous définissez borderColor sur zéro, vous pouvez nuage de points le graphique linéaire :
Plusieurs lignes
Code source
const xValeurs = [100,200,300,400,500,600,700,800,900,1000];
nouveau Graphique(“monGraphique”, {
tapez : “ligne”,
données: {
libellés : xValeurs,
ensembles de données : [{
data: [860,1140,1060,1060,1070,1110,1330,2210,7830,2478],
borderColor : “rouge”,
remplir : faux
},{
données: [1600,1700,1700,1900,2000,2700,4000,5000,6000,7000],
borderColor : “vert”,
remplir : faux
},{
données: [300,700,2000,5000,6000,4000,2000,1000,200,100],
borderColor : “bleu”,
remplir : faux
}]
},
option : {
légende : {affichage : faux}
}
});
Essayez-le vous-même »
Graphiques linéaires
Code source
const xValeurs = [];
const yValeurs = [];
générerDonnées(“x * 2 + 7”, 0, 10, 0.5);
nouveau Graphique(“monGraphique”, {
tapez : “ligne”,
données: {
libellés : xValeurs,
ensembles de données : [{
fill: false,
pointRadius: 1,
borderColor: “rgba(255,0,0,0.5)”,
data: yValues
}]
},
option : {…}
});
fonction générer des données (valeur, i1, i2, étape = 1) {
pour (soit x = i1; x <= i2; x += step) {
yValues.push(eval(valeur));
xValues.push(x);
}
}
Essayez-le vous-même »
Graphiques de fonction
Identique au graphique linéaire. Modifiez simplement le(s) paramètre(s) generateData :
generateData(“Math.sin(x)”, 0, 10, 0.5);
Essayez-le vous-même »
Diagramme à barres
Code source
var xValeurs = [“Italy”, “France”, “Spain”, “USA”, “Argentina”];
var yValeurs = [55, 49, 44, 24, 15];
var barColors = [“red”, “green”,”blue”,”orange”,”brown”];
nouveau Graphique(“monGraphique”, {
taper : “barre”,
données: {
libellés : xValeurs,
ensembles de données : [{
backgroundColor: barColors,
data: yValues
}]
},
option : {…}
});
Essayez-le vous-même »
Nuances de couleur :
var barColors = [
“rgba(0,0,255,1.0)”,
“rgba(0,0,255,0.8)”,
“rgba(0,0,255,0.6)”,
“rgba(0,0,255,0.4)”,
“rgba(0,0,255,0.2)”,
];
Essayez-le vous-même »
Barres horizontales
Changez simplement le type de “bar” en “horizontalBar”:
tapez : “barre horizontale”,
Essayez-le vous-même »
Camemberts
Exemple
nouveau Graphique(“monGraphique”, {
tapez : “tarte”,
données: {
libellés : xValeurs,
ensembles de données : [{
backgroundColor: barColors,
data: yValues
}]
},
option : {
titre: {
affichage : vrai,
texte : “Production mondiale de vin”
}
}
});
Essayez-le vous-même »
Graphiques en anneau
#Graphiquejs
