1. IronPDF for Node.js
  2. Blog IronPDF for Node.js
  3. Aide sur les nœuds
  4. recharts NPM
AIDE SUR LES NœUDS

recharts NPM (Comment ça marche pour les développeurs)

Jordi Bardia
Jordi Bardia
août 13, 2024
Partager:

Introduction

La création de visualisations de données interactives et dynamiques dans le cadre du développement web moderne est essentielle pour améliorer l'expérience de l'utilisateur et prendre des décisions fondées sur des données. Recharts, une bibliothèque de graphiques composable et redéfinie construite sur un composant React indépendant, offre une solution robuste et facile à utiliser pour créer de telles visualisations.

Cet article explore les caractéristiques de Recharts, ses avantages, et comment commencer à l'utiliser dans vos applications React. Nous nous pencherons également sur laIronPDF pour générer un PDF à partir d'URL de sites web ou de chaînes HTML, et nous verrons comment elle s'associe agréablement à Recharts pour afficher les graphiques produits.

Pourquoi choisir Recharts ?

Le paquet npm de Recharts se distingue pour plusieurs raisons :

  1. Facilité d'utilisation : Son approche déclarative s'aligne bien sur l'architecture à base de composants de React, ce qui la rend intuitive pour les développeurs déjà familiarisés avec React.

  2. Composabilité : Les composants de Recharts sont conçus pour être hautement composables, ce qui permet aux développeurs de construire des graphiques complexes en combinant des composants plus simples.3. Personnalisation : Il offre un haut degré de personnalisation, permettant aux développeurs de modifier presque tous les aspects de leurs graphiques.

  3. Réactif et adaptatif : Recharts garantit que les graphiques sont réactifs et s'adaptent bien aux différentes tailles et résolutions d'écran.

Démarrer avec Recharts

Recharts est une bibliothèque de graphiques composables :

Installation de Recharts

npm(méthode d'installation recommandée)

Pour commencer à utiliser Recharts, vous devez l'installer via npm ou yarn. Assurez-vous que Node.js et npm sont installés, puis exécutez la commande suivante dans le répertoire de votre projet :

npm install recharts // recharts installed for release testing

Vous pouvez également installer Recharts en utilisant la méthode de construction umd ou dev comme indiqué ci-dessous :

Umd

La version UMD est également disponible surunpkg.com:

<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/recharts/umd/Recharts.min.js"></script>
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/recharts/umd/Recharts.min.js"></script>
HTML

Développement

$ git clone https://github.com/recharts/recharts.git
$ cd recharts
$ npm install
$ npm run build

Démonstration

Utilisation de base

Créons un simple graphique linéaire pour visualiser quelques exemples de données.

  1. Importer les composants Recharts React : Importez les composants nécessaires de la bibliothèque Recharts. Vous pouvez sélectionner les modules Recharts à implémenter à partir de la branche release.
  import React from 'react';
  import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
JAVASCRIPT
  1. Préparer les données : Créer un ensemble de données à afficher dans le graphique.
  const data = [
        { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
        { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
        { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
        { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
        { name: 'Page E', uv: 1890, pv: 4800, amt: 2181 },
        { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
        { name: 'Page G', uv: 3490, pv: 4300, amt: 2100 },
      ];
JAVASCRIPT
  1. Rendre le graphique : Utilisez les composants Recharts pour rendre le graphique afin d'améliorer la plateforme de test visuel.
  const SimpleLineChart = () => (
        <ResponsiveContainer width="100%" height={400}>
          <LineChart
            width={500}
            height={300}
            data={data}
            margin={{
              top: 5, right: 30, left: 20, bottom: 5,
            }}
          >
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="name" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} />
            <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
          </LineChart>
        </ResponsiveContainer>
      );
      export default SimpleLineChart;
JAVASCRIPT

Sortie

recharts NPM(Comment ça marche pour les développeurs) : Figure 1 - PDF produit à partir du code précédent

Personnalisation et fonctionnalités avancées

En principe, Recharts offre plusieurs façons de personnaliser et d'étendre tous les composants :

Bulles d'aide personnalisées : Vous pouvez créer des infobulles personnalisées pour afficher des informations plus détaillées.

Animations : Ajoutez des animations pour rendre vos graphiques plus attrayants.

Interactivité : Mettez en œuvre des fonctions interactives telles que des gestionnaires de clics pour rendre vos graphiques plus interactifs.

  • Différents types de graphiques : Recharts prend en charge différents types de graphiques, notamment les diagrammes à barres, les diagrammes circulaires, les diagrammes de surface, etc.

Exemple : Personnalisation d'un diagramme à barres

Voici comment créer un diagramme à barres personnalisé :

  1. Importer les composants nécessaires :
import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
JAVASCRIPT
  1. Préparer les données :
const data = [
      { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
      { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
      { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
      { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
      { name: 'Page E', uv: 1890, pv: 4800, amt: 2181 },
      { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
      { name: 'Page G', uv: 3490, pv: 4300, amt: 2100 },
    ];
JAVASCRIPT
  1. Rendre le graphique à barres :
const CustomizedBarChart = () => (
      <ResponsiveContainer width="100%" height={400}>
        <BarChart
          width={500}
          height={300}
          data={data}
          margin={{
            top: 20, right: 30, left: 20, bottom: 5,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip />
          <Legend />
          <Bar dataKey="pv" fill="#8884d8" />
          <Bar dataKey="uv" fill="#82ca9d" />
        </BarChart>
      </ResponsiveContainer>
    );
    export default CustomizedBarChart;
JAVASCRIPT

Sortie

recharts NPM(Comment ça marche pour les développeurs) : Figure 2

Présentation d'IronPDF

recharts NPM(Comment ça marche pour les développeurs) : Figure 3 - Page web IronPDF

IronPDF for Node.js est un package npm robuste conçu pour faciliter la génération de PDF au sein des applications Node.js. Il permet de créer des documents PDF à partir de contenu HTML, d'URL ou de fichiers PDF existants. Qu'il s'agisse de générer des factures, des rapports ou d'autres documents, IronPDF simplifie le processus grâce à son API intuitive et à son vaste ensemble de fonctionnalités.

Principales caractéristiques d'IronPDF

Conversion HTML en PDF: Convertit sans effort le contenu HTML en documents PDF, idéal pour générer des PDF dynamiques à partir de contenu Web.

Conversion d'URL en PDF: Créez des PDF directement à partir d'URL, en capturant le contenu des pages web et en les enregistrant sous forme de fichiers PDF de manière programmatique.

Manipulation de PDF: Fusionner, diviser et manipuler des documents PDF existants en toute simplicité. IronPDF vous permet d'ajouter des pages, de diviser des documents, etc.

Sécurité PDF: Sécurisez vos documents PDF en les cryptant avec des mots de passe ou en appliquant des signatures numériques, protégeant ainsi vos documents sensibles contre tout accès non autorisé.

Production de documents PDF de haute qualité : Produisez des documents PDF de haute qualité avec un rendu précis du texte, des images et de la mise en forme, garantissant la fidélité au contenu original.

Compatibilité multiplateforme : IronPDF est compatible avec diverses plateformes, notamment Windows, Linux et macOS, ce qui le rend adapté à un large éventail d'environnements de développement.

Intégration simple: Intégrez facilement IronPDF à vos applications Node.js à l'aide de son package npm. L'API bien documentée permet d'intégrer facilement des fonctionnalités de génération de PDF dans vos projets.

Que vous construisiez une application web, un script côté serveur ou un outil de ligne de commande, IronPDF vous permet de créer des documents PDF de qualité professionnelle de manière efficace et fiable.

Générer un PDF avec Recharts en utilisant IronPDF

Installer les dépendances : Tout d'abord, créez un nouveau projet Next.js(si vous ne l'avez pas encore fait) à l'aide de la commande suivante, ou consulterici pour des instructions plus détaillées.

npx create-next-app@latest recharts-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

Ensuite, accédez au répertoire de votre projet :

cd recharts-pdf

Installez les paquets nécessaires à l'aide de la commande yarn suivante :

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add recharts

API de génération de PDF : La première étape consiste à créer une API pour générer le document PDF. Comme IronPDF ne fonctionne que côté serveur, nous devons créer une API à appeler lorsque les utilisateurs veulent générer des PDF.

Créez un fichier dans le chemin pages/api/pdf.js et ajoutez le contenu ci-dessous :

// pages/api/pdf.js
import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";
export default async function handler(req, res) {
    try {
        const url = req.query.url
        const pdf = await PdfDocument.fromUrl(url);
        const data = await pdf.saveAsBuffer();
        console.error('data PDF:', data);
        res.setHeader('Content-Type', 'application/pdf');
        res.setHeader('Content-Disposition', 'attachment; filename=awesomeIron.pdf');
        res.send(data);
    } catch (error) {
        console.error('Error generating PDF:', error);
        res.status(500).end();
    }
}
JAVASCRIPT

IronPDF nécessite une clé de licence, à obtenir auprès deici et le placer dans le code ci-dessus

Ajoutez le code ci-dessous pour accepter une URL de l'utilisateur et générer un PDF à partir de l'URL dans le fichier index.js.

"use client";
import { useState, HTMLDivElement } from "react";
import Head from "next/head";
import styles from "../../styles/Home.module.css";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
  BarChart,
  Bar,
} from "recharts";
import { useCurrentPng } from "recharts-to-png";
import FileSaver from "file-saver";
const data = [
  { name: "Page A", uv: 4000, pv: 2400, amt: 2400 },
  { name: "Page B", uv: 3000, pv: 1398, amt: 2210 },
  { name: "Page C", uv: 2000, pv: 9800, amt: 2290 },
  { name: "Page D", uv: 2780, pv: 3908, amt: 2000 },
  { name: "Page E", uv: 1890, pv: 4800, amt: 2181 },
  { name: "Page F", uv: 2390, pv: 3800, amt: 2500 },
  { name: "Page G", uv: 3490, pv: 4300, amt: 2100 },
];
const barData = [
  { name: "Page A", uv: 4000, pv: 2400, amt: 2400 },
  { name: "Page B", uv: 3000, pv: 1398, amt: 2210 },
  { name: "Page C", uv: 2000, pv: 9800, amt: 2290 },
  { name: "Page D", uv: 2780, pv: 3908, amt: 2000 },
  { name: "Page E", uv: 1890, pv: 4800, amt: 2181 },
  { name: "Page F", uv: 2390, pv: 3800, amt: 2500 },
  { name: "Page G", uv: 3490, pv: 4300, amt: 2100 },
];
export default function RechartsDemo() {
  const [text, setText] = useState("");
  const [imgSrc, setImg] = useState("");
  // Implement useGenerateImage to get an image of any element (not just a Recharts component)
  const [getPng, { ref, isLoading }] = useCurrentPng();
  const handleDownload = async () => {
    const png = await getPng();
    // Verify that png is not undefined
    if (png) {
        setImg(png);
      // Download with FileSaver
      FileSaver.saveAs(png, "myChart.png");
    }
  };
  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf?url=" + text, {
        method: "GET",
      });
      const blob = await response.blob();
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "awesomeIron.pdf");
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    } catch (error) {
      console.error("Error generating PDF:", error);
    }
  };
  const handleChange = (event) => {
    setText(event.target.value);
  };
  return (
    <div className={styles.container} ref={ref}>
      <Head>
        <title>Generate PDF Using IronPDF</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <div>
          <h1>Demo Recharts and Generate PDF Using IronPDF</h1>
          <ResponsiveContainer width="100%" height={400}>
            <LineChart
              ref={ref}
              width={500}
              height={300}
              data={data}
              margin={{
                top: 5,
                right: 30,
                left: 20,
                bottom: 5,
              }}
            >
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="name" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Line
                type="monotone"
                dataKey="pv"
                stroke="#8884d8"
                activeDot={{ r: 8 }}
              />
              <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
            </LineChart>
          </ResponsiveContainer>
          <ResponsiveContainer width="100%" height={400}>
            <BarChart
              width={500}
              height={300}
              data={barData}
              margin={{
                top: 20,
                right: 30,
                left: 20,
                bottom: 5,
              }}
            >
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="name" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Bar dataKey="pv" fill="#8884d8" />
              <Bar dataKey="uv" fill="#82ca9d" />
            </BarChart>
          </ResponsiveContainer>
          <p>
            <span>Enter Url To Convert to PDF:</span>{" "}
          </p>
          <button style={{ margin: 20, padding: 5 }} onClick={generatePdf}>
            Generate PDF
          </button>
        </div>
      </main>
      <style jsx>{`
        main {
          padding: 5rem 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: top;
          align-items: center;
        }
        footer {
          width: 100%;
          height: 100px;
          border-top: 1px solid #eaeaea;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        footer img {
          margin-left: 0.5rem;
        }
        footer a {
          display: flex;
          justify-content: center;
          align-items: center;
          text-decoration: none;
          color: inherit;
        }
        code {
          background: #fafafa;
          border-radius: 5px;
          padding: 0.75rem;
          font-size: 1.1rem;
          font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
            DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
        }
      `}</style>
      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
            Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
            sans-serif;
        }
        * {
          box-sizing: border-box;
        }
      `}</style>
    </div>
  );
}
JAVASCRIPT

Explication du code

  1. L'API pour la génération de PDF à l'aide d'IronPDF est ajoutée dans pages/api/pdf.js

  2. Nous ajoutons ensuite les deux types de graphiques que nous avons produits précédemment

  3. Nous ajoutons ensuite un champ de saisie et un bouton pour accepter l'URL de l'utilisateur et déclencher la génération du PDF

  4. Le PDF généré est présenté ci-dessous

Sortie

recharts NPM(Comment ça marche pour les développeurs) : Figure 4 - Sortie du code précédent

Voici le PDF produit lorsque l'on appuie sur le bouton "Générer un PDF" dans la sortie ci-dessus

recharts NPM(Comment ça marche pour les développeurs) : Figure 5 - Le PDF produit lorsque l'on appuie sur le bouton générer le PDF

Licence d'IronPDF

recharts NPM(Comment ça marche pour les développeurs) : Figure 6 - Page de licence d'IronPDF

Obtenez une clé de licence d'essai gratuitpour découvrir les fonctionnalités étendues d'IronPDF avant l'achat. De plus amples informations sur les licences perpétuelles sont disponibles sur le site web de la Commission européennelicense page.

Placez la clé de licence ici :

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";
JAVASCRIPT

Conclusion

Recharts est une bibliothèque puissante qui simplifie la création de visualisations de données dynamiques et interactives dans les applications React. Sa facilité d'utilisation, sa composabilité et ses nombreuses options de personnalisation en font un excellent choix pour les développeurs qui souhaitent enrichir leurs applications avec des graphiques robustes.

Que vous construisiez un simple graphique linéaire ou une visualisation complexe de plusieurs séries, Recharts fournit les outils dont vous avez besoin pour réussir. Essayez-le dans votre prochain projet et découvrez les avantages d'une visualisation transparente des données. IronPDF est un puissant outil de génération de PDF et peut être utilisé en conjonction avec Recharts pour afficher et partager tous les graphiques produits. Les développeurs à la recherche d'un outil efficace pour faciliter la production et la manipulation des PDF doivent essayer IronPDF.

Jordi Bardia
Jordi Bardia
  Discutez avec l'équipe d'ingénierie maintenant
Ingénieur logiciel
Jordi maîtrise parfaitement Python, C# et C++. Lorsqu'il ne met pas à profit ses compétences chez Iron Software, il se consacre à la programmation de jeux. Partageant des responsabilités en matière de tests de produits, de développement de produits et de recherche, Jordi apporte une valeur ajoutée considérable à l'amélioration continue des produits. Cette expérience variée le stimule et l'engage, et il dit que c'est l'un des aspects qu'il préfère dans son travail chez Iron Software. Jordi a grandi à Miami, en Floride, et a étudié l'informatique et les statistiques à l'université de Floride.
< PRÉCÉDENT
recoil NPM (Comment ça marche pour les développeurs)
SUIVANT >
d3 NPM (Comment ça marche pour les développeurs)

Installer avec npm

Version :2025.3

> npm i @ironsoftware/ironpdf

Signaler un problème

Prêt à commencer ? Version : 2025.3 vient de paraître

Commencer gratuitement
npm Télécharger Démarrer l'essai gratuit
Voir les licences > ;
Textlogo Iron Suite related to recharts NPM (Comment ça marche pour les développeurs)

IronPDF fait partie d'IRONSUITE

10 produits .NET API pour vos documents de bureau

Obtenez 10 produits pour le prix de 2   Démarrer l'essai gratuit