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)

Publié 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
npm install recharts // recharts installed for release testing
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

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>
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

Développement

$ 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
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

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';
```2. **Prepare Data**: Create a dataset to be displayed in the chart.

```cs
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 },
    ];
```3. **Render the Chart**: Use the Recharts components to render the chart for visual testing platform enhancement.

```cs
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;
import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
```2. **Prepare Data**: Create a dataset to be displayed in the chart.

```cs
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 },
    ];
```3. **Render the Chart**: Use the Recharts components to render the chart for visual testing platform enhancement.

```cs
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;
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

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';
```2. **Prepare Data**:

```cs
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 },
    ];
```3. **Render the Bar Chart**:

```cs
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;
import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
```2. **Prepare Data**:

```cs
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 },
    ];
```3. **Render the Bar Chart**:

```cs
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;
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

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 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"
npx create-next-app@latest recharts-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

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

cd recharts-pdf
cd recharts-pdf
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

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

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add recharts
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add recharts
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

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();
    }
}
// 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();
    }
}
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

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>
  );
}
"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>
  );
}
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

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

IronPDFafin de permettre aux utilisateurs de tester ses nombreuses fonctionnalités avant de l'acheter. 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";
import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

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.

< 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 :2024.11

> npm i @ironsoftware/ironpdf

Signaler un problème

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

Installation gratuite de npm Voir les licences > ;