AIDE NODE

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

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Mis à jour:juin 20, 2025

Créer des visualisations de données interactives et dynamiques dans le développement web moderne est crucial pour améliorer l'expérience utilisateur et prendre des décisions basées sur les données. Recharts, une bibliothèque de graphiques composables et redéfinis construite sur un composant React indépendant, offre une solution robuste et facile à utiliser pour créer ces visualisations.

Cet article explore les fonctionnalités de Recharts, ses avantages, et comment commencer à l'utiliser dans vos applications React. Nous examinerons également la bibliothèque IronPDF pour générer un PDF à partir d'URLs de sites Web ou de chaînes HTML, et nous verrons comment elle s'associe bien avec Recharts pour afficher les graphiques produits.

Pourquoi Choisir Recharts ?

Le paquet npm de Recharts se distingue pour plusieurs raisons :

Facilité d'utilisation : Son approche déclarative s'aligne bien avec l'architecture basée sur les composants de React, la rendant intuitive pour les développeurs déjà familiers avec React.
Composabilité : Les composants Recharts sont conçus pour être hautement composables, permettant aux développeurs de construire des graphiques complexes en combinant des composants plus simples.
Personnalisation : Il offre un haut degré de personnalisation, permettant aux développeurs de modifier presque tous les aspects de leurs graphiques.
Adaptatif et Réactif : Recharts garantit que les graphiques sont réactifs et s'adaptent bien à différentes tailles d'écran et résolutions.

Commencer avec Recharts

Recharts est une bibliothèque de graphiques composables. Commençons maintenant :

Installation

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

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

npm install recharts

npm install recharts

SHELL

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

Umd

Le build UMD est également disponible sur unpkg.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

Dev build

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

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

SHELL

Démo

Utilisation de base

Créons un graphique en ligne simple pour visualiser quelques données d'échantillon.

Importer les Composants React Recharts : Importez les composants nécessaires de la bibliothèque Recharts. Vous pouvez choisir les modules Recharts pour l'implémentation à partir de la branche de publication.

import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

JAVASCRIPT

Préparer les Données : Créez 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 },
];

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

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;

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 cela fonctionne pour les développeurs) : Figure 1 - PDF généré à partir du code précédent

Personnalisation et Fonctionnalités Avancées

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

Infobulles 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é : Implémentez des fonctionnalités interactives telles que des gestionnaires de clics pour rendre vos graphiques plus interactifs.

Différents Types de Graphiques : Recharts prend en charge divers types de graphiques, y compris les graphiques en barres, les graphiques en secteurs, les graphiques en aires, et plus encore.

Exemple : Personnaliser un Graphique en Barres

Voici comment créer un graphique en barres personnalisé :

Importer les Composants Nécessaires :

import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

JAVASCRIPT

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 },
];

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

Rendre le Graphique en 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;

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 cela fonctionne pour les développeurs) : Figure 2

Présentation d'IronPDF

recharts NPM (Comment cela fonctionne pour les développeurs) : Figure 3 - page web IronPDF

IronPDF pour Node.js est un paquet npm robuste conçu pour faciliter la génération de PDF dans les applications Node.js. Il permet de créer des documents PDF à partir de contenu HTML, d'URLs, ou de fichiers PDF existants. Que vous génériez des factures, des rapports ou d'autres documents, IronPDF simplifie le processus avec son API intuitive et son ensemble de fonctionnalités étendu.

Caractéristiques clés d'IronPDF

Conversion HTML en PDF : Convertissez facilement le contenu HTML en documents PDF, idéal pour générer des PDF dynamiques à partir de contenus web.
Conversion d'URL en PDF : Créez des PDF directement à partir d'URL, capturant le contenu des pages web et les enregistrant en tant que fichiers PDF de manière programmatique.
Manipulation de PDF : Fusionnez, divisez et manipulez des documents PDF existants avec facilité. IronPDF vous permet d'ajouter des pages, de diviser des documents, et plus encore.
Sécurité des PDF : Sécurisez vos documents PDF en les cryptant avec des mots de passe ou en appliquant des signatures numériques, protégeant vos documents sensibles d'un accès non autorisé.
Sortie de haute qualité : Produisez des documents PDF de haute qualité avec un rendu précis des textes, images et formats, garantissant la fidélité au contenu original.
Compatibilité multiplateforme : IronPDF est compatible avec diverses plateformes, y compris Windows, Linux et macOS, ce qui le rend adapté à une large gamme d'environnements de développement.
Intégration simple : Intégrez facilement IronPDF dans vos applications Node.js en utilisant son package npm. L'API bien documentée facilite l'incorporation des capacités de génération de PDF dans vos projets.

Que vous construisiez une application web, un script côté serveur, ou un outil en 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 déjà fait) en utilisant la commande suivante, ou consultez ici 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"

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

SHELL

Ensuite, naviguez vers votre répertoire de projet :

cd recharts-pdf

cd recharts-pdf

SHELL

Installez les paquets requis :

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

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

SHELL

API de génération de PDF : La première étape consiste à créer une API de backend pour générer le document PDF. Puisqu'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();
    }
}

// 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 requires a license key which you can obtain from the page de licence.

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 } 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>
            <input type="text" value={text} onChange={handleChange} />
          </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>
  );
}

"use client";
import { useState } 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>
            <input type="text" value={text} onChange={handleChange} />
          </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

API pour la Génération de PDF : Nous créons un endpoint à pages/api/pdf.js en utilisant IronPDF pour convertir une URL en un document PDF.
Composants de Graphique : L'application inclut des graphiques en ligne et en barres qui affichent des données d'échantillon.
Saisie Utilisateur et Génération de PDF : L'application propose un champ de saisie où les utilisateurs peuvent entrer une URL à convertir en PDF à l'aide de la bibliothèque IronPDF.
Télécharger le PDF : Lorsque le bouton 'Générer le PDF' est pressé, un PDF de la page web à l'URL spécifiée est généré et téléchargé.

Sortie

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

Ci-dessous se trouve le PDF généré lorsque le bouton 'Générer le PDF' est pressé dans la sortie ci-dessus.

recharts NPM (Comment cela fonctionne pour les développeurs) : Figure 5 - Le PDF généré lorsque le bouton de génération de PDF est pressé

Licence IronPDF

recharts NPM (Comment cela fonctionne pour les développeurs) : Figure 6 - page de licence IronPDF

Obtenez une clé de licence d'essai gratuite pour découvrir les fonctionnalités étendues d'IronPDF avant de l'acheter. Plus de détails sur les licences perpétuelles peuvent être trouvés sur la page de licence.

Placez la clé de licence ici :

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

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

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 cherchant à enrichir leurs applications avec des graphiques robustes.

Que vous construisiez un simple graphique en ligne ou une visualisation complexe à séries multiples, Recharts fournit les outils nécessaires pour réussir. Essayez-le dans votre prochain projet et découvrez les avantages d'une visualisation de données transparente. IronPDF est un outil puissant 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 aider à la production et la manipulation de PDF doivent essayer IronPDF.

Darrius Serrant

Discutez maintenant avec l'équipe d'ingénierie

Ingénieur logiciel Full Stack (WebOps)

Darrius Serrant est titulaire d'un baccalauréat en informatique de l'université de Miami et travaille comme ingénieur marketing WebOps Full Stack chez Iron Software. Attiré par le codage dès son plus jeune âge, il a vu l'informatique comme à la fois mystérieuse et accessible, en faisant le ...