Maison >interface Web >js tutoriel >Comment créer une arborescence rectangulaire à l'aide de Highcharts
Comment créer une arborescence rectangulaire à l'aide de Highcharts
- WBOYoriginal
- 2023-12-18 08:25:22767parcourir
Comment créer un arbre rectangulaire à l'aide de Highcharts
Highcharts est une bibliothèque de graphiques JavaScript populaire qui fournit une riche gamme de types de graphiques que nous pouvons utiliser. L'un d'eux est l'arborescence rectangulaire, qui nous permet d'afficher des données hiérarchiques de manière visuelle. Cet article explique comment utiliser Highcharts pour créer une arborescence rectangulaire et fournit des exemples de code spécifiques.
Étape 1 : Installer et présenter Highcharts
Tout d'abord, nous devons télécharger le fichier de la bibliothèque Highcharts depuis le site officiel de Highcharts et l'introduire dans notre projet. Il peut être obtenu des deux manières suivantes :
- Téléchargez le fichier de la bibliothèque Highcharts et introduisez-le dans le fichier HTML
- Installez Highcharts via npm et introduisez-le dans le projet
Ce qui suit est un exemple de fichier HTML qui présente le Bibliothèque Highcharts Code :
<!DOCTYPE html> <html> <head> <title>矩形树图表示例</title> <script src="https://code.highcharts.com/highcharts.js"></script> </head> <body> <div id="container"></div> </body> </html>
Étape 2 : Préparer les données
Avant de créer un arbre rectangulaire, nous devons préparer les données hiérarchiques. Le format de données de l'arborescence rectangulaire est un tableau imbriqué d'objets. Chaque objet contient les attributs name (nom du nœud) et value (valeur du nœud), ainsi que l'attribut children (un tableau contenant des nœuds enfants). Voici un exemple de données :
var data = {
name: '根节点',
value: 10,
children: [
{
name: '子节点1',
value: 5,
children: []
},
{
name: '子节点2',
value: 3,
children: [
{
name: '子节点2.1',
value: 2,
children: []
},
{
name: '子节点2.2',
value: 1,
children: []
}
]
},
{
name: '子节点3',
value: 2,
children: []
}
]
};Étape 3 : Créer une arborescence rectangulaire
Ensuite, nous pouvons utiliser la méthode chart de Highcharts pour créer une arborescence rectangulaire. Dans la méthode chart, nous devons spécifier le type de graphique comme rectangularTree et définir d'autres attributs nécessaires, tels que le titre, les données, etc. chart方法来创建矩形树图表。在chart方法中，我们需要指定图表的类型为rectangularTree，同时设置好其他必要的属性，如标题、数据等。
下面是一个创建矩形树图表的代码示例：
Highcharts.chart('container', {
chart: {
type: 'rectangularTree'
},
title: {
text: '矩形树图表示例'
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
levelIsConstant: false,
data: [data]
}]
});在上面的代码中，我们指定了图表类型为rectangularTree，设置了标题为矩形树图表示例。接着，在series属性中定义了一个treemap系列，设置了布局算法为squarified，允许点击节点进行钻取，以及设置了数据为我们准备好的数据[data]
rrreee
Dans le code ci-dessus, nous avons spécifié le type de graphique commerectangularTree et défini le titre comme Exemple d'arborescence rectangulairecode>. Ensuite, une série <code>treemap est définie dans l'attribut series, l'algorithme de mise en page est défini sur squarifié, permettant de cliquer sur les nœuds pour le forage, et les Données [data] préparées pour nous. Étape 4 : Aperçu dans le navigateurEnfin, nous prévisualisons le fichier HTML dans le navigateur et vous pouvez voir l'arborescence rectangulaire générée. Le graphique dessine automatiquement des rectangles en fonction de la structure hiérarchique des données et peut être développé et réduit en cliquant sur les nœuds. 🎜🎜Grâce aux étapes ci-dessus, nous avons réussi à créer un arbre rectangulaire à l'aide de Highcharts et à montrer un exemple de code spécifique. Vous pouvez ajuster l'algorithme de mise en page, le style et d'autres attributs en fonction de vos propres besoins, et générer l'arborescence rectangulaire de votre choix en fonction de vos propres données. Highcharts offre une multitude d'options de configuration qui peuvent nous aider à obtenir des effets plus personnalisés. J'espère que cet article pourra vous aider à créer une arborescence rectangulaire à 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!