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 basiert, bietet eine robuste und benutzerfreundliche Lösung zur 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 auch die IronPDF-Bibliothek untersuchen, um ein PDF aus Website-URLs oder HTML-Strings zu generieren, und wir werden sehen, wie sie sich gut mit Recharts kombinieren lässt, um die erzeugten Grafiken 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, was es Entwicklern, die bereits mit React vertraut sind, intuitiv macht.

2. Komponierbarkeit: Recharts-Komponenten sind so konzipiert, dass sie hoch komponierbar sind, wodurch Entwickler komplexe Diagramme durch die Kombination einfacher Komponenten erstellen können. Anpassung: Es bietet einen hohen Grad an Anpassungsmöglichkeiten, sodass Entwickler fast jeden Aspekt ihrer Diagramme anpassen können.

3. Responsive und anpassungsfähig: Recharts garantiert, dass Diagramme reaktionsschnell 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

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

Umd

Der UMD Build ist ebenfalls 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>

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

Demo

Grundlegende Verwendung

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

1. Importieren Sie Recharts React-Komponenten: Importieren Sie die notwendigen 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';

js

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

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

js

3. Diagram rendern: Verwenden Sie die Recharts-Komponenten, um das Diagramm für die Verbesserung der visuellen Testplattform 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;

js

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 Klick-Handler, um Ihre Diagramme interaktiver zu gestalten.

• Verschiedene Diagrammtypen: Recharts unterstützt verschiedene Diagrammtypen, einschließlich 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';

js

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

js

3. 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;

js

Ausgabe

Einführung in IronPDF

IronPDF for Node.js ist ein robustes npm-Paket, das entwickelt wurde, um die PDF-Erstellung innerhalb von Node.js-Anwendungen zu erleichtern. 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: Mühelos HTML-Inhalte in PDF-Dokumente umwandeln, 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-Bearbeitung: Vorhandene PDF-Dokumente mühelos zusammenführen, teilen und bearbeiten. IronPDF ermöglicht es Ihnen, Seiten anzuhängen, Dokumente zu teilen und vieles mehr.

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

Hochwertige Ausgabe: Erstellen Sie hochwertige PDF-Dokumente mit präziser Wiedergabe von Text, Bildern und Formatierungen, die die Originalinhalte getreu wiedergeben.

Plattformübergreifende Kompatibilität: IronPDF ist kompatibel mit verschiedenen Plattformen, einschließlich Windows, Linux und macOS, was es für eine breite Palette von 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-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 zuerst 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"

Navigieren Sie dann zu Ihrem Projektverzeichnis:

cd recharts-pdf

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

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

PDF-Generierungs-API: Der erste Schritt besteht darin, eine Backend-API zur Erstellung des PDF-Dokuments zu entwickeln. 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();
    }
}

js

IronPDF erfordert einen Lizenzschlüssel. Holen Sie ihn sich 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>
  );
}

js

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

Erhalten Sie einen kostenlosen Testlizenzschlüssel, um die umfangreichen Funktionen von IronPDF vor dem Kauf auszuprobieren. Weitere Details zu unbefristeten Lizenzen finden Sie auf der 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";

js

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 leistungsstarkes Tool zur PDF-Erstellung und kann in Verbindung mit Recharts verwendet werden, um alle erstellten Diagramme anzuzeigen und zu teilen. Entwickler, die auf der Suche nach einem effektiven Werkzeug für die PDF-Produktion und -Bearbeitung sind, sollten IronPDF ausprobieren.