Nachrichten-Symbol
  1. IronPDF for Node.js
  2. IronPDF for Node.js Blog
  3. Hilfe zum Knotenpunkt
  4. recharts NPM
HILFE ZUM KNOTENPUNKT

recharts NPM (Wie es für Entwickler funktioniert)

Veröffentlicht 13. August 2024
Teilen Sie:

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

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

Umd

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

Entwicklung bauen

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

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';
JAVASCRIPT
  1. Daten vorbereiten: Erstellen Sie ein Dataset, das 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 },
      ];
JAVASCRIPT
  1. Diagram rendern: Verwenden Sie die Recharts-Komponenten, um das Diagramm zur Verbesserung der visuellen Testplattform darzustellen.
  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 - Ausgegebene PDF-Datei aus dem vorherigen Code

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';
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 },
    ];
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;
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 for Node.js 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"

Navigieren Sie dann zu Ihrem Projektverzeichnis:

cd recharts-pdf

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

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

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();
    }
}
JAVASCRIPT

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>
  );
}
JAVASCRIPT

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

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

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

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

IronPDF-Lizenz

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

Erhalten Sie einen kostenlosen Testlizenzschlüsselum die umfangreichen Funktionen von IronPDF vor dem Kauf zu prüfen. Weitere Einzelheiten zur unbefristeten Lizenzierung finden Sie auf der WebsiteLizenz 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";
JAVASCRIPT

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.

< PREVIOUS
recoil NPM (Wie es für Entwickler funktioniert)
NÄCHSTES >
d3 NPM (Wie es für Entwickler funktioniert)

Installation mit npm

Version:2024.12

> npm i @ironsoftware/ironpdf

Ein Problem melden

Sind Sie bereit, loszulegen? Version: 2024.12 gerade veröffentlicht

Kostenlose npm-Installation Lizenzen anzeigen >
Kostenlos testen
Curved White Arrow related to recharts NPM (Wie es für Entwickler funktioniert)

Voll funktionsfähiges Produkt, sofortiger Erhalt des Schlüssels