Nachrichtensymbol
Zum Fußzeileninhalt springen
  1. IronPDF für Node.js
  2. IronPDF für den Node.js Blog
  3. Node-Hilfe
  4. recharts NPM
NODE-HILFE

recharts NPM (Wie es für Entwickler funktioniert)

Darrius Serrant
Darrius Serrant
Aktualisiert:

Interaktive und dynamische Datenvisualisierungen in der modernen Webentwicklung zu erstellen, ist entscheidend für die Verbesserung der Benutzererfahrung und datengesteuerte Entscheidungen. Recharts, eine komponierbare, neu definierte Diagrammbibliothek, die auf einer unabhängigen React-Komponente basiert, bietet eine robuste und benutzerfreundliche Lösung zur Erstellung solcher Visualisierungen.

Dieser Artikel untersucht die Funktionen von Recharts, seine Vorteile und wie man damit in Ihren React-Anwendungen beginnt. Wir werden uns auch die IronPDF-Bibliothek ansehen, um ein PDF aus Website-URLs oder HTML-Strings zu generieren, und wir werden sehen, wie es gut mit Recharts zusammenarbeitet, um die erzeugten Diagramme anzuzeigen.

Warum Recharts wählen?

Die Recharts-npm-Paket zeichnet sich aus verschiedenen Gründen aus:

  1. Benutzerfreundlichkeit: Der deklarative Ansatz passt gut zur komponentenbasierten Architektur von React, was es Entwicklern, die bereits mit React vertraut sind, intuitiv macht.
  2. Komponierbarkeit: Die Komponenten von Recharts sind so konzipiert, dass sie hochkomponierbar sind und es Entwicklern ermöglichen, komplexe Diagramme durch Kombination einfacher Komponenten zu erstellen.
  3. Anpassung: Es bietet ein hohes Maß an Anpassungsmöglichkeiten, die es Entwicklern ermöglichen, fast jeden Aspekt ihrer Diagramme anzupassen.
  4. Reaktionsfähigkeit und Anpassungsfähigkeit: Recharts garantiert, dass Diagramme reaktionsfähig sind und sich gut an verschiedene Bildschirmgrößen und -auflösungen anpassen.

Erste Schritte mit Recharts

Recharts ist eine komponierbare Diagrammbibliothek. Lassen Sie uns nun loslegen:

Installation

npm (empfohlene Installationsmethode)

Um Recharts zu verwenden, müssen Sie es über npm oder yarn installieren. Stellen Sie sicher, dass Sie Node.js und npm installiert haben, und führen Sie dann den folgenden Befehl in Ihrem Projektverzeichnis aus:

npm install recharts
npm install recharts
SHELL

Sie könnten Recharts auch mit der umd- oder dev-build-Methode wie unten gezeigt installieren:

Umd

Der UMD-Build ist auch auf unpkg.com verfügbar:

<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

Demo

Grundlegende Verwendung

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

  1. Recharts React-Komponenten importieren: Importieren Sie die erforderlichen Komponenten aus der Recharts-Bibliothek. Sie können Recharts-Module für die Implementierung aus dem Freigabezweig wählen.

    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

  2. Daten vorbereiten: Erstellen Sie einen Datensatz, der im Diagramm angezeigt werden soll.

    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

  3. Das Diagramm rendern: Verwenden Sie die Recharts-Komponenten, um das Diagramm für visuelle Testplattformverbesserungen zu rendern.

    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

Ausgabe

recharts NPM (Wie es für Entwickler funktioniert): Abbildung 1 – Ausgegebenes PDF aus dem vorherigen Code

Anpassung 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 machen.

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

Beispiel: Anpassung eines Balkendiagramms

So erstellen Sie ein angepasstes Balkendiagramm:

  1. Erforderliche Komponenten importieren:
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
  1. Daten vorbereiten:
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
  1. Das Balkendiagramm rendern:
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

Ausgabe

recharts NPM (Wie es für Entwickler funktioniert): Abbildung 2

Einführung in IronPDF

recharts NPM (Wie es für Entwickler funktioniert): Abbildung 3 – IronPDF-Webseite

IronPDF für Node.js ist ein robustes npm-Paket, das entwickelt wurde, um die PDF-Erstellung in Node.js-Anwendungen zu erleichtern. Es ermöglicht die Erstellung von PDF-Dokumenten aus HTML-Inhalten, URLs oder vorhandenen PDF-Dateien. Ob Sie Rechnungen, Berichte oder andere Dokumente erstellen, IronPDF vereinfacht den Prozess mit seiner intuitiven API und seinem umfangreichen Funktionsumfang.

Hauptfunktionen von IronPDF

  • HTML-zu-PDF-Konvertierung: Konvertieren Sie HTML-Inhalte problemlos 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 sie programmatisch als PDF-Dateien speichern.
  • PDF-Manipulation: Vereinen, aufteilen und manipulieren Sie vorhandene PDF-Dokumente mit Leichtigkeit. IronPDF ermöglicht es Ihnen, Seiten hinzuzufügen, Dokumente zu teilen und mehr.
  • PDF-Sicherheit: Sichern Sie Ihre PDF-Dokumente, indem Sie sie mit Passwörtern verschlüsseln oder digitale Unterschriften anwenden, um Ihre sensiblen Dokumente vor unbefugtem Zugriff zu schützen.
  • Hochwertige Ausgabe: Erstellen Sie hochwertige PDF-Dokumente mit präziser Wiedergabe von Text, Bildern und Formatierungen, um die Originalinhalte originalgetreu darzustellen.
  • Plattformübergreifende Kompatibilität: IronPDF ist mit verschiedenen Plattformen kompatibel, einschließlich Windows, Linux und macOS, was es für viele Entwicklungsumgebungen geeignet macht.
  • Einfache Integration: Integrieren Sie IronPDF problemlos in Ihre Node.js-Anwendungen mithilfe des npm-Pakets. Die gut dokumentierte API macht es einfach, PDF-Erstellungsfunktionen in Ihre Projekte zu integrieren.

Egal, ob Sie eine Webanwendung, ein serverseitiges Skript oder ein Befehlszeilenwerkzeug erstellen, mit IronPDF können Sie professionell gestaltete PDF-Dokumente effizient und zuverlässig erstellen.

Ein PDF mit Recharts unter Verwendung von IronPDF erstellen

Abhängigkeiten installieren: Erstellen Sie zunächst ein neues Next.js-Projekt (falls Sie dies noch nicht getan haben) mit dem folgenden Befehl, oder beziehen Sie sich hier für detailliertere 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"
SHELL

Navigieren Sie als Nächstes in Ihr Projektverzeichnis:

cd recharts-pdf
cd recharts-pdf
SHELL

Installieren Sie die erforderlichen Pakete:

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

PDF-Erstellungs-API: Der erste Schritt ist das Erstellen einer Backend-API, um das PDF-Dokument zu generieren. Da IronPDF nur serverseitig ausgeführt wird, müssen wir eine API erstellen, um sie zu verwenden, wenn Benutzer PDFs generieren möchten.

Erstellen Sie eine Datei im Pfad pages/api/pdf.js und fügen Sie die folgenden Inhalte 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();
    }
}
JAVASCRIPT

IronPDF requires a license key which you can obtain from the Licensing-Seite erhalten können.

Fügen Sie den folgenden Code hinzu, um von Benutzern eine URL zu akzeptieren und daraus ein PDF zu generieren, und zwar in die index.js-Datei.

"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

Code-Erklärung

  1. API zur PDF-Erzeugung: Wir erstellen einen Endpunkt unter pages/api/pdf.js mit IronPDF, um eine URL in ein PDF-Dokument zu konvertieren.
  2. Diagrammkomponenten: Die Anwendung enthält sowohl Linien- als auch Balkendiagramme, die Beispieldaten anzeigen.
  3. Benutzereingabe und PDF-Erstellung: Die App bietet ein Eingabefeld, in dem Benutzer eine URL eingeben können, um sie mithilfe der IronPDF-Bibliothek in ein PDF zu konvertieren.
  4. PDF herunterladen: Wenn die Schaltfläche 'PDF generieren' gedrückt wird, wird eine PDF der Webseite mit der angegebenen URL generiert und heruntergeladen.

Ausgabe

recharts NPM (Wie es für Entwickler funktioniert): Abbildung 4 – Ausgabe des vorherigen Codes

Unten ist das ausgegebene PDF zu sehen, wenn die Schaltfläche 'PDF generieren' im obigen Ergebnis gedrückt wird.

recharts NPM (Wie es für Entwickler funktioniert): Abbildung 5 – Das ausgegebene PDF, wenn die PDF-Schaltfläche zum Generieren gedrückt wird

IronPDF-Lizenz

recharts NPM (Wie es für Entwickler funktioniert): Abbildung 6 – IronPDF Lizenzierungsseite

Erhalten Sie einen kostenlosen Testlizenzschlüssel, um die umfangreichen Funktionen von IronPDF vor dem Kauf auszuprobieren. Weitere Details zur dauerhaften Lizenzierung finden Sie auf der Lizenz-Seite.

Platzieren Sie hier den Lizenzschlüssel:

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

Abschluss

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

Egal, ob Sie ein einfaches Liniendiagramm oder eine komplexe Mehrfachserien-Visualisierung erstellen, Recharts bietet die Werkzeuge, die Sie zum Erfolg benötigen. Probieren Sie es in Ihrem nächsten Projekt aus und erleben Sie die Vorteile einer nahtlosen Datenvisualisierung. IronPDF ist ein leistungsstarkes PDF-Erstellungstool und kann in Verbindung mit Recharts verwendet werden, um alle erzeugten Diagramme anzuzeigen und zu teilen. Entwickler, die nach einem effektiven Werkzeug zur Unterstützung bei der PDF-Erstellung und -Bearbeitung suchen, müssen IronPDF ausprobieren.

Darrius Serrant
Darrius Serrant
  Jetzt mit dem Ingenieurteam chatten
Full-Stack-Software-Ingenieur (WebOps)

Darrius Serrant hat einen Bachelor-Abschluss in Informatik von der University of Miami und arbeitet als Full-Stack-WebOps-Marketing-Ingenieur bei Iron Software. Seit seiner Jugend vom Programmieren angezogen, sah er die Informatik als sowohl mysteriös als auch zugänglich, was es zum perfekten Medium für Kreativität und Problemlösung ...

Weiterlesen

Verwandte Artikel

30-Tage-Testversion → Volles Produkt. Keine Grenzen. Keine Karte. Testversion