recharts NPM (Wie es für Entwickler funktioniert)

Einführung

Die Erstellung interaktiver und dynamischer Datenvisualisierungen in der modernen Webentwicklung ist von entscheidender Bedeutung für die Verbesserung der Benutzererfahrung und datengesteuerte Entscheidungen. Recharts, eine zusammensetzbare, neu definierte Diagrammbibliothek, die auf einer unabhängigen React-Komponente aufbaut, bietet eine robuste und einfach zu verwendende Lösung für die Erstellung solcher Visualisierungen.

Dieser Artikel beschäftigt sich mit den Funktionen von Recharts, seinen Vorteilen und wie Sie es in Ihren React-Anwendungen einsetzen können. Wir werden uns auch mit den IronPDF bibliothek, um ein PDF aus Website-URLs oder HTML-Strings zu generieren, und wir werden sehen, wie gut sie mit Recharts zusammenpasst, um die erzeugten Diagramme anzuzeigen.

Warum Recharts wählen?

Das npm-Paket von Recharts zeichnet sich aus mehreren Gründen aus:

1. Benutzerfreundlichkeit: Der deklarative Ansatz passt gut zur komponentenbasierten Architektur von React und macht es für Entwickler, die bereits mit React vertraut sind, intuitiv.

2. Zusammensetzbarkeit: Die Komponenten von Recharts sind so konzipiert, dass sie in hohem Maße zusammensetzbar sind, so dass Entwickler komplexe Diagramme durch die Kombination einfacherer Komponenten erstellen können.3. Anpassung: Recharts bietet ein hohes Maß an Anpassungsmöglichkeiten und ermöglicht es Entwicklern, fast jeden Aspekt ihrer Diagramme zu optimieren.

3. Reaktionsschnell und anpassungsfähig: Recharts garantiert, dass die Diagramme reaktionsfähig sind und sich gut an verschiedene Bildschirmgrößen und Auflösungen anpassen.

Erste Schritte mit Recharts

Recharts ist eine zusammensetzbare Diagrammbibliothek, mit der wir jetzt loslegen können:

Recharts Installation

npm (empfohlene Installationsmethode)

Um Recharts nutzen zu können, müssen Sie es über npm oder yarn installieren. Vergewissern Sie sich, dass Sie Node.js und npm installiert haben, und führen Sie dann den folgenden Befehl in Ihrem Projektverzeichnis aus:

npm install recharts // recharts installed for release testing

npm install recharts // recharts installed for release testing

IRON VB CONVERTER ERROR developers@ironsoftware.com

Sie können Recharts auch mit der umd- oder dev-Build-Methode installieren, wie unten gezeigt:

Umd

Der UMD-Build ist auch verfügbar auf 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>

IRON VB CONVERTER ERROR developers@ironsoftware.com

Entwicklung bauen

$ 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

Demo

Grundlegende Verwendung

Lassen Sie uns ein einfaches Liniendiagramm erstellen, um einige Beispieldaten zu visualisieren.

1. Importieren Sie Recharts React-Komponenten: Importieren Sie die erforderlichen Komponenten aus der Recharts-Bibliothek. Sie können Recharts-Module für die Implementierung aus dem Release-Zweig herauspicken.

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

Ausgabe

Anpassungen und erweiterte Funktionen

Im Prinzip bietet Recharts verschiedene Möglichkeiten, alle Komponenten anzupassen und zu erweitern:

Benutzerdefinierte Tooltips: Sie können benutzerdefinierte Tooltips erstellen, um detailliertere Informationen anzuzeigen.

Animationen: Fügen Sie Animationen hinzu, um Ihre Diagramme ansprechender zu gestalten.

Interaktivität: Implementieren Sie interaktive Funktionen wie Click-Handler, um Ihre Diagramme interaktiver zu gestalten.

• Unterschiedliche Diagrammtypen: Recharts unterstützt verschiedene Diagrammtypen, darunter Balkendiagramme, Kreisdiagramme, Flächendiagramme und mehr.

Beispiel: Anpassen eines Balkendiagramms

Hier erfahren Sie, wie Sie ein benutzerdefiniertes Balkendiagramm erstellen können:

1. Notwendige Komponenten importieren:

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

Ausgabe

Einführung in IronPDF

IronPDF ist ein robustes npm-Paket, das die PDF-Erzeugung in Node.js-Anwendungen erleichtert. Es ermöglicht die Erstellung von PDF-Dokumenten aus HTML-Inhalten, URLs oder vorhandenen PDF-Dateien. Ob Rechnungen, Berichte oder andere Dokumente, IronPDF vereinfacht den Prozess mit seiner intuitiven API und seinem umfangreichen Funktionsumfang.

Hauptmerkmale von IronPDF

HTML-zu-PDF-Konvertierung: Konvertieren Sie mühelos HTML-Inhalte in PDF-Dokumente, ideal für die Erstellung dynamischer PDFs aus Webinhalten.

URL-zu-PDF-Konvertierung: Erstellen Sie PDFs direkt aus URLs, indem Sie den Inhalt von Webseiten erfassen und programmgesteuert als PDF-Dateien speichern.

PDF-Bearbeitung: Bestehende PDF-Dokumente lassen sich mühelos zusammenführen, aufteilen und manipulieren. IronPDF ermöglicht es Ihnen, Seiten anzuhängen, Dokumente zu teilen und vieles mehr.

PDF-Sicherheit: Sichern Sie Ihre PDF-Dokumente, indem Sie sie mit Passwörtern verschlüsseln oder digitale Signaturen anwenden, um Ihre sensiblen Dokumente vor unbefugtem Zugriff zu schützen.

Qualitativ hochwertige Ausgabe: Produzieren Sie hochwertige PDF-Dokumente mit präziser Wiedergabe von Text, Bildern und Formatierungen, die dem Originalinhalt treu bleiben.

Plattformübergreifende Kompatibilität: IronPDF ist mit verschiedenen Plattformen kompatibel, darunter Windows, Linux und macOS, und eignet sich daher für eine Vielzahl von Entwicklungsumgebungen.

Einfache Integration: Integrieren Sie IronPDF mit Hilfe des npm-Pakets einfach in Ihre Node.js-Anwendungen. Die gut dokumentierte API macht es einfach, PDF-Generierungsfunktionen in Ihre Projekte einzubinden.

Ganz gleich, ob Sie eine Webanwendung, ein serverseitiges Skript oder ein Befehlszeilen-Tool entwickeln, IronPDF ermöglicht Ihnen die effiziente und zuverlässige Erstellung professioneller PDF-Dokumente.

Erzeugen einer PDF-Datei mit Recharts mit IronPDF

Abhängigkeiten installieren: Erstellen Sie zunächst ein neues Next.js-Projekt (falls Sie es noch nicht getan haben) mit folgendem Befehl, oder siehe *hier für ausführlichere Anweisungen.

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

Navigieren Sie dann zu Ihrem Projektverzeichnis:

cd recharts-pdf

cd recharts-pdf

IRON VB CONVERTER ERROR developers@ironsoftware.com

Installieren Sie die erforderlichen Pakete mit dem folgenden Garn-Befehl:

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

PDF-Erzeugungs-API: Der erste Schritt besteht darin, eine Backend-API zu erstellen, um das PDF-Dokument zu generieren. Da IronPDF nur serverseitig läuft, müssen wir eine API erstellen, die aufgerufen wird, wenn Benutzer PDFs erzeugen wollen.

Erstellen Sie eine Datei im Pfad pages/api/pdf.js und fügen Sie den folgenden Inhalt hinzu:

// 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

IronPDF benötigt einen Lizenzschlüssel, den Sie unter *hier und fügen Sie ihn in den obigen Code ein

Fügen Sie den folgenden Code hinzu, um eine URL vom Benutzer zu akzeptieren und eine PDF-Datei aus der URL in der index.js-Datei zu generieren.

"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

Code Erläuterung

1. API für die PDF-Erzeugung mit IronPDF wurde in pages/api/pdf.js hinzugefügt

2. Dann fügen wir die 2 Arten von Diagrammen hinzu, die wir zuvor erstellt haben

3. Dann fügen wir ein Eingabefeld und einen Button hinzu, um die Benutzer-URL zu akzeptieren und die PDF-Erzeugung auszulösen

4. Die erzeugte PDF-Datei ist unten abgebildet

Ausgabe

Nachfolgend sehen Sie die PDF-Ausgabe, wenn die Schaltfläche "PDF generieren" in der obigen Ausgabe gedrückt wird

IronPDF-Lizenz

IronPDFlizenz, damit die Benutzer die umfangreichen Funktionen vor dem Kauf testen können. Weitere Einzelheiten zur unbefristeten Lizenzierung finden Sie auf der Website Lizenz seite.

Geben Sie hier den Lizenzschlüssel ein:

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

Schlussfolgerung

Recharts ist eine leistungsstarke Bibliothek, die die Erstellung dynamischer und interaktiver Datenvisualisierungen in React-Anwendungen vereinfacht. Seine Benutzerfreundlichkeit, Kompositionsfähigkeit und umfangreichen Anpassungsmöglichkeiten machen es zu einer ausgezeichneten Wahl für Entwickler, die ihre Anwendungen mit robusten Diagrammen erweitern möchten.

Ganz gleich, ob Sie ein einfaches Liniendiagramm oder eine komplexe Multiserien-Visualisierung erstellen möchten, Recharts bietet Ihnen die Werkzeuge, die Sie für den Erfolg benötigen. Probieren Sie es bei Ihrem nächsten Projekt aus und erleben Sie die Vorteile einer nahtlosen Datenvisualisierung. IronPDF ist ein leistungsfähiges Werkzeug zur Erstellung von PDF-Dateien und kann in Verbindung mit Recharts verwendet werden, um die erstellten Diagramme anzuzeigen und weiterzugeben. Entwickler, die auf der Suche nach einem effektiven Werkzeug für die PDF-Produktion und -Bearbeitung sind, sollten IronPDF ausprobieren.