Maison > Article > interface Web > Comment utiliser des nuages de points pour afficher des données dans Highcharts
Comment utiliser des nuages de points pour afficher des données dans Highcharts
- WBOYoriginal
- 2023-12-17 22:30:321002parcourir
Comment utiliser des nuages de points pour afficher des données dans Highcharts
Avant-propos
Highcharts est une bibliothèque de graphiques JavaScript open source qui fournit des types de graphiques riches et de puissantes fonctions de personnalisation. Parmi eux, le nuage de points est une méthode de visualisation de données couramment utilisée qui peut montrer la relation entre deux variables et la distribution des variables. Cet article explique comment utiliser les nuages de points pour afficher des données dans Highcharts et fournit des exemples de code spécifiques.
Étape 1 : Importer le fichier de bibliothèque Highcharts
Tout d'abord, vous devez introduire le fichier de bibliothèque Highcharts dans le fichier HTML. Ces fichiers peuvent être importés à l'aide de CDN, le code est le suivant :
<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/highcharts@8.2.2/highcharts.js"></script> </head> <body> <div id="container"></div> </body> </html>
Étape 2 : Préparer les données
Avant d'utiliser le nuage de points, vous devez préparer un ensemble de données. Les données peuvent être un tableau bidimensionnel, chaque élément contient deux valeurs, représentant respectivement les coordonnées de l'axe horizontal et de l'axe vertical. Les exemples de données sont les suivants :
var data = [ [1, 5], [2, 10], [3, 15], [4, 20], [5, 25] ];
Étape 3 : Créez un nuage de points
Ensuite, utilisez. l'API de la bibliothèque Highcharts pour créer un nuage de points. Un objet de configuration doit être transmis pour spécifier les paramètres du graphique. L'exemple de code est le suivant :
Highcharts.chart('container', {
chart: {
type: 'scatter'
},
title: {
text: '散点图'
},
xAxis: {
title: {
text: '横轴标题'
}
},
yAxis: {
title: {
text: '纵轴标题'
}
},
series: [{
name: '散点数据',
data: data
}]
});Dans le code ci-dessus, nous avons spécifié le type de graphique comme nuage de points (nuage de points) et défini le titre, l'axe horizontal et titres de l’axe vertical. En passant le tableau de données, nous traçons les données dans un nuage de points.
Étape 4 : Configurer d'autres options
Highcharts offre une multitude d'options et de configurations qui peuvent être utilisées pour personnaliser davantage le style et l'interaction des graphiques. Voici quelques options couramment utilisées :
- Couleur : Vous pouvez spécifier la couleur des points de dispersion en définissant la propriété color de l'objet série.
- Taille : vous pouvez spécifier la taille des points de dispersion en définissant la propriété marqueur de l'objet série.
- Labels : vous pouvez ajouter des étiquettes de points de dispersion en définissant la propriété dataLabels de l'objet série.
Highcharts.chart('container', {
chart: {
type: 'scatter'
},
title: {
text: '散点图'
},
xAxis: {
title: {
text: '横轴标题'
}
},
yAxis: {
title: {
text: '纵轴标题'
}
},
series: [{
name: '散点数据',
data: data,
color: 'blue',
marker: {
symbol: 'circle',
radius: 5
},
dataLabels: {
enabled: true,
format: '{point.y}',
style: {
color: 'black'
}
}
}]
});Le code ci-dessus définit la couleur des points de dispersion sur bleu, la taille sur un cercle d'un rayon de 5 et ajoute des étiquettes de données aux points de dispersion.
Conclusion
Cet article explique comment utiliser les nuages de points pour afficher des données dans Highcharts et fournit des exemples de code spécifiques. En introduisant les fichiers de bibliothèque Highcharts, en préparant les données, en créant des nuages de points et en configurant d'autres options, vous pouvez personnaliser et afficher les données de manière flexible. J'espère que cet article vous sera utile lors de la création de nuages de points à l'aide de Highcharts.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!