Fermer

août 11, 2022

React Charts simplifié

React Charts simplifié


Créez votre propre graphique React Heatmap, magnifique et fonctionnel, en moins de 50 lignes de code, y compris les importations et le passe-partout des composants !

Lorsque vous avez beaucoup de données que vos utilisateurs doivent analyser, la meilleure chose à faire est de les formater de manière à les aider à voir facilement les modèles, les dépendances et à trouver des informations. Neuf fois sur 10, cela signifie visualisations de données. Avec la bibliothèque de composants de l’interface utilisateur KendoReact, vous n’avez pas besoin de rechercher une autre bibliothèque externe et de vous demander si elle contiendra tous les différents graphiques, graphiques et affichages dont vous avez besoin – vous avez déjà tout ce dont vous avez besoin.

Que vous soyez nouveau dans l’écriture de React ou simplement nouveau dans la bibliothèque de graphiques KendoReactnous allons parler de tout ce que vous devez savoir pour créer efficacement de belles visualisations de données interactives, avec l’aide de KendoRéagir. Nous commencerons par un aperçu des types de graphiques que vous pouvez utiliser, vérifierons le processus d’installation et de configuration et verrons enfin comment appliquer certaines personnalisations courantes. Commençons!

Ce qui est inclu?

La Bibliothèque de graphiques KendoReact comprend 16 types différents de visualisations de données, toutes réalisées entièrement dans React sans dépendances tierces :

Chacun de ces graphiques a une interactivité intégrée : panoramique, zoom, défilement, info-bulles, et plus. Chaque graphique React peut être rendu sous la forme d’un élément SVG ou Canvasaussi bien que facilement exportable à divers formats d’image (y compris PDF).

Noter: En plus de la liste ci-dessus (qui font toutes partie de la bibliothèque de graphiques et de notre objectif dans cet article), vous pouvez également accéder à des options de visualisation de données plus complexes. Celles-ci ont été divisées en leurs propres sous-bibliothèques au sein de KendoReact afin que vous puissiez réduire la taille du bundle en n’incluant pas de gros composants dont vous n’avez pas besoin :

Installation et configuration du graphique

Tous les packages KendoReact sont disponibles via npm. Si vous démarrez un tout nouveau projet, je vous recommande fortement d’utiliser le Créer un outil d’application KendoReact car c’est le moyen le plus simple de commencer avec KendoReact. Il fournit un assistant de configuration qui vous guide tout au long du processus de création d’une nouvelle application React avec des composants KendoReact. Si vous avez déjà un projet React, ajouter les graphiques KendoReact est aussi simple que :

npm install --save @progress/kendo-react-charts @progress/kendo-drawing @progress/kendo-react-intl @progress/kendo-licensing hammerjs

Copiez et collez cette ligne dans votre terminal pour installer la bibliothèque Charts, ainsi que les bibliothèques dont elle dépend.

Une fois que vous êtes installé, il est temps de commencer à configurer le graphique. Par exemple, passons en revue les étapes que j’ai suivies pour importer et configurer le Réagissez au graphique de la carte thermique j’utilise dans mon application de démonstration LKARS. Voici un aperçu du produit fini :

Exemple d'un graphique de carte thermique KendoReact

1. Importer le graphique React et les données

Nous devons intégrer toutes les pièces dans notre application avant de pouvoir commencer à jouer avec elles, donc la première étape consiste à importer ! Le composant React Chart comporte plusieurs sous-composants dont nous aurons besoin : ChartTitle, ChartSeries, etc. Vous pourriez avoir besoin de différents sous-composants pour différents types de séries, assurez-vous donc toujours de vérifier la documentation si vous rencontrez des difficultés pour faire fonctionner quelque chose – il se peut qu’il vous manque juste un sous-composant ! Dans notre cas, nous avons besoin des sous-composants pour le ChartSeries et ChartAxisesdonc notre importation ressemblera à ceci :

import { Chart, ChartSeries, ChartSeriesItem, ChartXAxis, ChartXAxisItem, ChartYAxis, ChartYAxisItem, } from "@progress/kendo-react-charts";

J’ai aussi un fichier séparé, heatmap-data.jsqui contient toutes les données que nous allons utiliser dans le graphique. Je vais donc également les importer.

import { data } from "./heatmap-data";

2. Configurer le graphique de réaction

Maintenant que nous avons tout importé, il est temps de l’utiliser. Nous allons commencer par notre composant parent. Ma carte thermique s’intègre dans une disposition de grille plus grande avec d’autres composants, j’ai donc ajouté des styles qui lui indiquent de prendre 100% de la largeur disponible et 80% de la hauteur disponible de son élément parent. Vous pouvez les laisser de côté, si vous le souhaitez, et il sera par défaut en taille réelle.

<Chart style={{ width: "100%", height: "80%"}}></Chart>

3. Spécifiez le type de série et connectez les données

Ensuite, nous utiliserons les sous-composants et pour configurer les spécificités de notre graphique et câbler la source de données.

<Chart style={{ width: "100%", height: "80%"}}>
    <ChartSeries>
        <ChartSeriesItem type="heatmap" data={data} color="#7788ff"/>
    </ChartSeries>
</Chart>

Dans <ChartSeriesItem> Je définis le type de graphique que je veux utiliser comme carte thermique avec type="heatmap". Si vous vouliez utiliser un graphique à barres, un graphique à secteurs ou autre chose, c’est ici que vous le spécifieriez. Ensuite, je lui dis d’utiliser les données que j’ai importées pour remplir le graphique avec data={data}. Enfin, je veux que ma carte thermique corresponde au reste de mon thème LKARS, j’ai donc spécifié une couleur hexadécimale à utiliser avec color="#7788ff". Si vous ne spécifiez pas de couleur, la valeur par défaut sera soit le thème par défaut de KendoReact, soit l’échantillon que vous utilisez.

C’est vraiment tout ce que j’aurais besoin de faire pour que ma carte thermique soit opérationnelle ! Comme vous pouvez le voir ci-dessous, les données sont importées et tout fonctionne comme prévu. Cependant, j’aimerais apporter quelques modifications supplémentaires pour personnaliser l’apparence de mon graphique.

Une carte thermique KendoReact par défaut avec des couleurs personnalisées appliquées

4. Personnalisation du graphique React Heatmap

La première chose que j’aimerais faire est de supprimer les numéros d’étiquette dans chaque marqueur carré. J’aimerais que ma carte thermique se concentre davantage sur la communication de tendances générales de haut niveau, de sorte que les chiffres ne soient pas importants, sans parler du fait qu’ils donnent l’impression d’être encombrés. Alors, je vais ajouter labels={{visible: false}} à mes propriétés et supprimer ces étiquettes numérotées.

<Chart style={{ width: "100%", height: "80%"}}> 
  <ChartSeries> 
    <ChartSeriesItem type="heatmap" data={data} color="#7788ff" 
      labels={{ visible: false }} 
    /> 
  </ChartSeries> 
</Chart> 

Une carte thermique KendoReact avec des couleurs personnalisées appliquées et les numéros par défaut supprimés

ça a l’air bien plus propre ! Mais, dans le style LKARS, les choses sont généralement rondes, pas carrées. Alors, j’aimerais changer la forme de mes marqueurs pour mieux coller au thème en ajoutant markers={{type: "circle"}}. Je vais aussi leur donner un border avec une largeur de 2px, ils ont donc un peu de marge de manœuvre.

<Chart style={{ width: "100%", height: "80%"}}> 
  <ChartSeries> 
    <ChartSeriesItem type="heatmap" data={data} color="#7788ff" 
      labels={{ visible: false }} 
      markers={{ type: "circle", border: { width: 2} }} 
    /> 
  </ChartSeries> 
</Chart>

Exemple de graphique de carte thermique KendoReact avec des marqueurs, des couleurs et des chiffres personnalisés supprimés

Nous sommes proches, maintenant, de ce à quoi je voudrais qu’il ressemble, mais je souhaite modifier les étiquettes des axes pour qu’elles soient plus descriptives. Comme cela mesure par Stardate, j’aimerais que les étiquettes de l’axe Y affichent cette information. Je vais configurer une variable rapide appelée dayLabels avec ces données…

const dayLabels = { 0: "99355.24", 1: "97235.0", 2: "98828.1", 3: "94965.91", 4: "91126.52", 5: "93457.3", 6: "97628.99", };

… puis ajoutez cela à mon graphique, en utilisant le ChartYAxis sous-composant. Vous pouvez voir ci-dessous que mes spécifications labels={{ content: (e) => dayLabels[e.value] }}afin qu’il puisse référencer les données Stardate.

<Chart style={{ width: "100%", height: "80%"}}> 
  <ChartSeries> 
    <ChartSeriesItem type="heatmap" data={data} color="#7788ff" 
      labels={{ visible: false }} 
      markers={{ type: "circle", border: { width: 2} }} 
    /> 
  </ChartSeries> 
  <ChartYAxis> 
    <ChartYAxisItem labels={{ content: (e) => dayLabels[e.value] }}/> 
  </ChartYAxis> 
</Chart>  

Ensuite, comme je n’ai pas vraiment besoin des étiquettes de l’axe X dans cette situation, je vais simplement les supprimer en définissant le ChartXAxisItemla propriété visible de false.

<Chart style={{ width: "100%", height: "80%"}}> 
  <ChartSeries> 
    <ChartSeriesItem type="heatmap" data={data} color="#7788ff" 
      labels={{ visible: false }} 
      markers={{ type: "circle", border: { width: 2} }} 
    /> 
  </ChartSeries> 
  <ChartYAxis> 
    <ChartYAxisItem labels={{ content: (e) => dayLabels[e.value] }}/> 
  </ChartYAxis> 
  <ChartXAxis> 
    <ChartXAxisItem visible={false} /> 
  </ChartXAxis> 
</Chart> 

Exemple d'une carte thermique KendoReact avec des étiquettes d'axe personnalisées, des formes de module, des couleurs et des nombres supprimés

Prêt à partir!

Juste comme ça, un graphique React Heatmap magnifique et fonctionnel, personnalisé pour correspondre à notre application existante, en moins de 50 lignes de code, y compris les importations et le passe-partout des composants. Voilà ce que j’appelle efficace ! Vous pouvez personnaliser littéralement
n’importe quel partie du graphique – le ciel est vraiment la limite, comme vous pouvez le voir par la différence entre ce graphique Heatmap et les exemples de la documentation !

Si vous voulez le vérifier vous-même, vous pouvez jouer avec ceci (moins stylé) Démo StackBlitzou explorez le application de démonstration LKARS complète pour voir un exemple plus complet. Et, bien sûr, n’hésitez pas à explorer toutes les autres merveilleuses options de cartographie mentionnées ci-dessus. Vous pouvez voir toutes leurs fonctionnalités riches et même accéder à un support technique primé pendant l’essai gratuit de 30 jours de KendoReact.


Continuez le voyage LKARS de Kathryn avec Trier, filtrer et regrouper avec la grille de données KendoReact et
Comment utiliser et personnaliser le KendoReact DatePicker.




Source link