Visualisation des données avec ApexCharts

À propos de l'auteur

Nefe est un développeur frontend qui aime apprendre de nouvelles choses et partager ses connaissances avec les autres.
En savoir plus sur
Nefe
…

ApexCharts est une bibliothèque de graphiques moderne qui aide les développeurs à créer de superbes visualisations interactives pour les pages Web avec une API simple, tandis que React-ApexCharts est l'intégration React d'ApexChart qui nous permet d'utiliser ApexCharts dans nos applications. Cet article sera utile à ceux qui ont besoin de montrer des données graphiques complexes à leurs clients.

Premiers pas

Tout d'abord, installez le composant React-ApexCharts dans votre application React et importez react-apexcharts .

 npm i react-apexcharts apexcharts

importer des ReactApexCharts depuis 'react-apexcharts' 

Les composants principaux d'un ApexChart sont son objet de configuration. Dans l'objet de configuration, nous définissons les propriétés des options series et pour un graphique. série sont les données que nous voulons visualiser sur le graphique. Dans la série, nous définissons les données et le nom des données. Les valeurs du tableau de données seront tracées sur l'axe y du graphique. Le nom des données apparaîtra lorsque vous survolerez le graphique. Vous pouvez avoir une ou plusieurs séries de données. Dans les options nous définissons l'apparence d'un graphique, les fonctionnalités et les outils que nous voulons ajouter à un graphique et les étiquettes des axes x et y d'un graphique. Les données que nous définissons dans les propriétés série et des options de l'objet de configuration sont ce que nous transmettons ensuite aux séries et du composant ReactApexChart options respectivement.

Voici un exemple de la façon dont les composants d'un ApexChart fonctionnent ensemble. (Nous les examinerons de plus près plus tard dans l'article.)

 const config = {
  série: [1, 2, 3, 4, 5],
  options: {
    graphique: {
      barre d'outils: {
      montrer: vrai
      },
    }
  }
}

revenir (
  
) 

En parcourant la documentation vous remarquerez que la largeur, la hauteur et le type de graphique sont définis dans l'objet options, comme dans l'extrait de code ci-dessous.

 const config = {
  série: [44, 55, 13, 43, 22],
  graphique: {
    largeur: 380,
    type: 'tarte'
  }
}, 

C'est parce que les documents ont été écrits avec une application JavaScript vanille à l'esprit. Nous travaillons avec React, nous définissons donc la largeur, la hauteur et le type en les passant comme accessoires au composant ReactApexCharts . Nous verrons comment cela fonctionne dans la section suivante.

Graphiques linéaires

C'est un type de graphique utilisé pour montrer des informations qui changent avec le temps. Nous traçons une ligne en utilisant plusieurs points reliés par des lignes droites. Nous utilisons des graphiques en courbes pour visualiser comment une donnée change au fil du temps. Par exemple, dans une application financière, vous pouvez l'utiliser pour montrer à un utilisateur comment ses achats ont augmenté au fil du temps.

Ce graphique comprend les éléments suivants:

• Titre
Il se trouve en haut du graphique et informe l'utilisateur sur les données qu'il représente.
• Barre d'outils
La barre d'outils se trouve dans le coin droit de l'image ci-dessus. Il contrôle le niveau de zoom du graphique. Vous pouvez également exporter le caractère via la barre d'outils.
• Étiquettes d'axe
Sur les axes gauche et droit, nous avons les étiquettes pour chaque axe.
• Étiquettes de données
Les étiquettes de données sont visibles sur chaque point de tracé sur la ligne. Ils facilitent la visualisation des données sur le graphique.

Nous avons vu à quoi ressemble un graphique linéaire et ses différents composants. Passons maintenant aux étapes de la construction d'un.

Nous commençons par la série . Ici, nous définissons les données de la série et son nom. Ensuite, nous passons les séries d'options et aux accessoires du composant ReactApexChart . Nous définissons également le type de graphique dans l'accessoire type et le définissons sur line .

 const config = {
  série: [{
    name: "Performance",
    data: [10, 21, 35, 41, 59, 62, 79, 81, 98]
  }],
 options: {}
}
revenir (
  
) 

La partie critique d'un ApexChart est sa série données. Les configurations définies dans la propriété options sont facultatives. Sans définir de définition dans les options les données seront toujours affichées. Cependant, ce n'est peut-être pas le graphique le plus lisible. Si vous décidez de ne pas définir de définitions personnalisées dans les options il doit toujours être présent comme un objet vide.

Configurons les options du graphique en ajoutant quelques valeurs à l'objet options que nous avons dans la configuration ]

Dans la propriété chart de l'objet options nous définissons les configurations du graphique. Ici, nous ajoutons la barre d'outils du graphique en définissant sa propriété show sur true . La barre d'outils nous fournit des outils pour contrôler le niveau de zoom du graphique et pour exporter le graphique dans différents formats de fichiers. La barre d'outils est visible par défaut.

 options: {
  graphique: {
    barre d'outils: {
      montrer: vrai
    },
  },
} 

Nous pouvons rendre notre graphique plus facile à lire en activant les étiquettes de données pour le graphique. Pour ce faire, nous ajoutons la propriété dataLabels à l'objet options et définissons sa propriété enabled sur true . Cela facilite l'interprétation des données du graphique.

 dataLabels: {
  activé: vrai
}, 

Par défaut, le trait d'un graphique linéaire est droit. Cependant, nous pouvons le rendre incurvé. Nous ajoutons la propriété stroke aux options et définissons sa courbe sur smooth .

 stroke: {
  courbe: "lisse"
} 

Une partie importante de tout graphique est son titre. Nous ajoutons une propriété title aux options pour donner un titre au graphique.

 title: {
  texte: 'Un graphique en courbes',
  alignez à gauche'
}, 

Nous pouvons ajouter des étiquettes aux axes x et y du graphique. Pour ce faire, nous ajoutons les propriétés xaxis et yaxis aux options et là, nous définissons le titre pour chaque axe.

 xaxis : {
  catégories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
  Titre: {
    texte: 'Mois'
  }
},
yaxis: {
  Titre: {
    texte: 'Performance'
  }
} 

En fin de compte, votre code devrait ressembler à ceci. Avec ces étapes, nous avons non seulement construit un graphique en courbes, mais nous avons également vu comment les options que nous définissons peuvent améliorer un graphique.

 import ReactApexCharts depuis 'react-ApexCharts'

const config = {
  série: [{
    name: "Performance",
    data: [10, 21, 35, 41, 59, 62, 79, 81, 98]
  }],
  options: {
    graphique: {
      barre d'outils: {
        montrer: vrai
      },
    },

    dataLabels: {
      activé: vrai
    },
  
    accident vasculaire cérébral: {
      courbe: "lisse"
    }
   
    Titre: {
      texte: 'Un graphique en courbes',
      alignez à gauche'
    },
  
    xaxis: {
      catégories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
      Titre: {
        texte: 'Mois'
      }
    },

    yaxis: {
      Titre: {
        texte: 'Performance'
      }
    }
  }
}
revenir (
  
) 

Graphiques en aires

Un graphique en aires est comme un graphique en courbes en termes de la façon dont les valeurs de données sont tracées sur le graphique et reliées à l'aide de segments de ligne. La seule différence est que dans un graphique en aires, la zone tracée par les points de données est remplie de nuances ou de couleurs. Tout comme les graphiques en courbes, les graphiques en aires illustrent la manière dont un élément de données change au fil du temps. Cependant, contrairement aux graphiques en courbes, ils peuvent également représenter visuellement le volume. Nous pouvons l'utiliser pour montrer comment les groupes d'une série de données se croisent. Par exemple, un graphique qui vous montre le volume d'utilisateurs qui accèdent à votre application via différents navigateurs.

Dans l'image ci-dessus, nous avons un exemple de graphique en aires. Comme le graphique en courbes, il a un titre, des étiquettes de données et des étiquettes d'axe. La partie ombrée du graphique en aires tracées montre le volume des données. Il montre également comment les données de series1 se croisent avec celles de series2 . Un autre cas d'utilisation des graphiques en aires consiste à montrer la relation entre deux ou plusieurs éléments de données et leur intersection.

Voyons comment créer un diagramme en aires empilées et comment y ajouter des étiquettes de données.

Pour créer un graphique à aires, nous définissons le type de graphique sur area et le trait sur smooth . Il s'agit du trait par défaut d'un graphique en aires.

 const config = {
  options: {
   accident vasculaire cérébral: {
      courbe: 'lisse'
    }
  }
}

revenir (
  
) 

Pour en faire un graphique empilé, dans la propriété chart de l'objet options nous définissons stacked à true .

 const config = {
  options: {
   accident vasculaire cérébral: {
      courbe: 'lisse'
    },
    graphique: {
      empilé: vrai
  }
}

revenir (
  
) 

Graphiques à barres

Nous utilisons des graphiques à barres pour présenter des données avec des barres rectangulaires à des hauteurs ou des longueurs proportionnelles aux valeurs qu'ils représentent. Il est préférable de l'utiliser pour comparer différentes catégories, comme le type de voiture des gens ou le nombre de clients dans un magasin à des jours différents.

Les barres horizontales sont les principaux composants d'un graphique à barres. Ils nous permettent de comparer facilement les valeurs de différentes catégories.

En construisant un histogramme, nous commençons par définir les données de série pour le graphique et en définissant le type du composant ReactApexChart à bar .

 const config = {
   série: [{
    data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
  }],
  options: {}
}

revenir (
  
) 

Ajoutons plus de vie et de distinction aux barres. Par défaut, les graphiques à barres sont verticaux. Pour les rendre horizontales, nous définissons l'apparence des barres dans la propriété plotOptions . Nous définissons l'étai horizontal sur true pour rendre les barres horizontales. Nous définissons la position des dataLabels sur bottom . Nous pouvons également le définir sur top ou center . L'étai distribué ajoute de la distinction à nos barres. Sans elle, aucune couleur distincte ne sera appliquée aux barres et la légende ne s'affichera pas en bas du graphique. Nous définissons également la forme des barres à l'aide des propriétés startingShape et endShape .

 options {
  plotOptions: {
      bar: {
        distribué: vrai,
        horizontal: vrai,
        startingShape: "plat",
        endshape: "arrondi",
        dataLabels: {
          position: 'bas',
        },
      }
    },
} 

Ensuite, nous ajoutons les catégories, les étiquettes et les titres au graphique.

 xaxis: {
  catégories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan', 'United States', 'China', 'India']
},

Titre: {
  texte: 'Un graphique à barres',
  aligner: 'centre',
}, 

Graphiques à colonnes

Un histogramme est une visualisation de données où chaque catégorie est représentée par un rectangle, la hauteur du rectangle étant proportionnelle aux valeurs tracées. Comme les graphiques à barres, les histogrammes sont utilisés pour comparer différentes catégories de données. Les graphiques à colonnes sont également appelés graphiques à barres verticales. Pour convertir l'histogramme ci-dessus en histogramme, il suffit de définir horizontal sur false dans le plotOptions .

Les colonnes verticales facilitent l'interprétation des données que nous visualisons. De plus, les étiquettes de données ajoutées en haut de chaque colonne augmentent la lisibilité du graphique.

Examinons la création d'un histogramme de base et voyons comment nous pouvons le convertir en un histogramme empilé.

Comme toujours, nous commencez par les données de la série et définissez le type de graphique sur "bar".

 const config = {
  série: [{
    name: 'Net Profit',
    data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
  }, {
    nom: 'Revenu',
    données: [76, 85, 101, 98, 87, 105, 91, 114, 94]
  }, {
    nom: 'Free Cash Flow',
    données: [35, 41, 36, 26, 45, 48, 52, 53, 41]
  }],
options: {}
}

revenir (
  
) 

C'est ce que nous sortons de la boîte. Cependant, nous pouvons le personnaliser. Nous définissons la largeur et la forme des barres dans la propriété plotOptions . Nous définissons également la position du dataLabel sur top .

 options: {
  plotOptions: {
      bar: {
        columnWidth: '75% ',
        finShape: 'plat',
        dataLabels: {
          position: "haut"
        },
      },
    },
} 

Ensuite, nous définissons le style et la taille de la police des étiquettes de données et leur distance par rapport aux graphiques. Enfin, nous ajoutons les étiquettes des axes x et y.

 options: {
  dataLabels: {
    offsetY: -25,
    style: {
        fontSize: '12px',
        couleurs: ["#304758"]
    }
  },
  
  xaxis: {
    catégories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
  },
  
  yaxis: {
    Titre: {
      texte: '$ (milliers)'
    }
  },
} 

Pour convertir ceci en un graphique empilé, il suffit d'ajouter une propriété stacked au graphique et de la définir sur vrai . De plus, étant donné que nous sommes passés à un graphique empilé, nous allons changer la endshape des barres en flat pour supprimer les courbes.

 options: {
  graphique: {
    empilé: vrai,
  },

  plotOptions: {
    bar: {
      finShape: 'plat',
    }
  }
} 

Graphiques à secteurs et en anneau

Un diagramme à secteurs est un graphique circulaire qui montre les catégories individuelles sous forme de tranches - ou pourcentages - de l'ensemble. Le graphique en anneau est une variante du graphique à secteurs, avec un trou en son centre, et il affiche les catégories sous forme d'arcs plutôt que de tranches. Les deux facilitent la compréhension des relations de partie à tout en un coup d'œil. Les graphiques circulaires et les graphiques en anneau sont couramment utilisés pour visualiser les résultats des élections et des recensements, les revenus par produit ou par division, les données de recyclage, les réponses aux enquêtes, les ventilations budgétaires, les statistiques de l'éducation, les plans de dépenses ou la segmentation de la population. ] Exemple de graphique à secteurs. ( Grand aperçu )

Dans les graphiques à secteurs et en anneau, la série est calculée en pourcentages. Cela signifie que la somme des valeurs de la série doit être de 100.

Commençons par créer un graphique à secteurs. Nous définissons le type de graphique sur camembert . Nous définissons également la série pour le graphique et définissons les étiquettes dans les options . L'ordre des étiquettes correspond aux valeurs du tableau series .

 const config = {
  série: [20, 10, 35, 12, 23],
    options: {
      étiquettes: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
    }
}

revenir (
  
) 

Nous pouvons contrôler la nature sensible de nos graphiques. Pour ce faire, nous ajoutons une propriété responsive aux options du graphique . Ici, nous définissons le point d'arrêt max-width sur 480px . Ensuite, nous définissons la largeur du graphique sur 450px et la position de la légende sur bas . Désormais, à des tailles d'écran de 480px et moins, la légende apparaîtra en bas du graphique.

 options: {
  étiquettes: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
  réactif: [{
    breakpoint: 480,
    options: {
      chart: {
        width: 450
      },
      legend: {
        position: 'bottom'
      }
    }
  }]
  }, 

Pour convertir le graphique à secteurs en graphique en anneau, il vous suffit de changer le type du composant en anneau .

Graphiques mixtes

Les graphiques mixtes vous permettent de combiner deux ou plusieurs types de graphiques en un seul graphique. Vous pouvez utiliser des graphiques mixtes lorsque les nombres dans vos données varient considérablement d'une série de données à une série de données ou lorsque vous avez des types de données mixtes (par exemple, prix et volume). Les graphiques mixtes facilitent la visualisation simultanée de différents types de données dans le même format.

Faisons une combinaison d'un graphique en courbes, en aires et en colonnes.

Nous définissons les données de la série et le type pour chacun des graphiques. Pour les graphiques mixtes, le type de chaque graphique est défini dans sa série et non dans le composant ReactApexChart type prop.

 const config = {
  série: [{
    name: 'TEAM A',
    type: 'column',
    data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
  }, {
    nom: 'TEAM B',
    type: 'zone',
    données: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
  }, {
    nom: 'TEAM C',
    type: 'ligne',
    données: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
  }],
  options: {}
} 

Ensuite, nous définissons le type de trait sur smooth et définissons sa largeur. On passe un tableau de valeurs pour définir la largeur de chaque graphique. Les valeurs du tableau correspondent à l'ordre des graphiques définis dans la série . Nous définissons également l’opacité du remplissage de chaque graphique. Pour cela, nous passons également dans un tableau. De cette façon, nous pouvons contrôler l'opacité de chaque graphique séparément.

Enfin, nous ajoutons les étiquettes pour les axes x et y.

 options: {
  accident vasculaire cérébral: {
    largeur: [2,2,4],
    courbe: 'lisse'
  },
  remplir: {
    opacité: [0.7, 0.3, 1],
  },
  étiquettes: ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July',
      'Aug', 'Sept', 'Oct', 'Nov'],
  yaxis: {
    Titre: {
      texte: 'Points',
    },
  },
} 

Personnalisation de nos graphiques

En plus de changer la couleur de nos graphiques, nous pouvons leur ajouter un certain niveau de personnalisation.

Nous pouvons ajouter des grilles à nos graphiques et à notre style leur. Dans la propriété grid nous définissons les couleurs des lignes et des colonnes du graphique. L'ajout de grilles à votre graphique peut faciliter la compréhension.

 options: {
  la grille: {
    rangée: {
      couleurs: ['#f3f3', 'transparent'],
      opacité: 0,5
    },
    colonne: {
      couleurs: ['#dddddd', 'transparent'],
      opacité: 0,5
    },
  },
} 

Nous pouvons ajuster le contour des graphiques et définir leurs couleurs. Faisons cela avec le histogramme. Chaque couleur du tableau colors correspond aux données du tableau series .

 options: {
  accident vasculaire cérébral: {
    montrer: vrai,
    largeur: 4,
    couleurs: ['red', "blue", "green" ]
  },
} 

Conclusion

Nous avons passé en revue certains des types de graphiques fournis par ApexCharts et appris comment passer d'un type de graphique à un autre. Nous avons également vu quelques moyens de personnaliser l'apparence de nos graphiques. Il y a encore beaucoup de choses à découvrir, alors plongez-vous tout de suite dans la docs ApexCharts .

(ks, ra, yk, il)