Przejdź do treści stopki
  1. IronPDF for Node.js
  2. Blog IronPDF for Node.js
  3. Pomoc Node
  4. recharts NPM
POMOC NODE

recharts NPM (jak to działa dla programistów)

Darrius Serrant
Darrius Serrant
Zaktualizowano:

Tworzenie interaktywnych i dynamicznych wizualizacji danych w nowoczesnym tworzeniu stron internetowych ma kluczowe znaczenie dla poprawy komfortu użytkowania i podejmowania decyzji opartych na danych. Recharts, modułowa, na nowo zdefiniowana biblioteka wykresów oparta na niezależnym komponencie React, oferuje solidne i łatwe w użyciu rozwiązanie do tworzenia takich wizualizacji.

W tym artykule omówiono funkcje Recharts, jego zalety oraz sposób rozpoczęcia pracy z nim w aplikacjach React. Przyjrzymy się również bibliotece IronPDF, która służy do generowania plików PDF na podstawie adresów URL stron internetowych lub ciągów HTML, oraz zobaczymy, jak dobrze współgra ona z Recharts w celu wyświetlania utworzonych wykresów.

Dlaczego warto wybrać Recharts?

Pakiet npm Recharts wyróżnia się z kilku powodów:

  1. Łatwość użytkowania: Jego podejście deklaratywne dobrze współgra z architekturą opartą na komponentach Reacta, dzięki czemu jest intuicyjne dla programistów zaznajomionych już z Reactem.
  2. Kompozycyjność: Komponenty Recharts zostały zaprojektowane z myślą o wysokiej kompozycyjności, co pozwala programistom tworzyć złożone wykresy poprzez łączenie prostszych komponentów.
  3. Dostosowywanie: Zapewnia wysoki stopień dostosowania, umożliwiając programistom modyfikowanie niemal każdego aspektu swoich wykresów.
  4. Responsywność i adaptacyjność: Recharts gwarantuje, że wykresy są responsywne i dobrze dostosowują się do różnych rozmiarów ekranów i rozdzielczości.

Pierwsze kroki z Recharts

Recharts to biblioteka wykresów, którą można dowolnie łączyć. Zacznijmy więc:

Instalacja

npm (zalecana metoda instalacji)

Aby rozpocząć korzystanie z Recharts, należy zainstalować go za pomocą npm lub yarn. Upewnij się, że masz zainstalowane Node.js i npm, a następnie uruchom następujące polecenie w katalogu projektu:

npm install recharts
npm install recharts
SHELL

Można również zainstalować Recharts przy użyciu metody umd lub dev build, jak pokazano poniżej:

Umd

Kompilacja UMD jest również dostępna na stronie 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>
HTML

Wersja deweloperska

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

Podstawowe zastosowanie

Stwórzmy prosty wykres liniowy, aby zwizualizować przykładowe dane.

  1. Importuj komponenty Recharts React: Zaimportuj niezbędne komponenty z biblioteki Recharts. Możesz wybierać moduły Recharts do wdrożenia z gałęzi wydania.

    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. Przygotuj dane: Utwórz zbiór danych, który ma zostać wyświetlony na wykresie.

    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. Wyrenderuj wykres: Użyj komponentów Recharts do wyrenderowania wykresu w celu ulepszenia platformy do testów wizualnych.

    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

Wynik

recharts NPM (Jak to działa dla programistów): Rysunek 1 – Plik PDF wygenerowany na podstawie poprzedniego kodu

Dostosowywanie i zaawansowane funkcje

Zasadniczo Recharts oferuje różne sposoby dostosowywania i rozszerzania wszystkich komponentów:

  • Niestandardowe podpowiedzi: Możesz tworzyć niestandardowe podpowiedzi, aby wyświetlać bardziej szczegółowe informacje.
  • Animacje: Dodaj animacje, aby Twoje wykresy były bardziej atrakcyjne.
  • Interaktywność: Wprowadź funkcje interaktywne, takie jak obsługa kliknięć, aby Twoje wykresy były bardziej interaktywne.

Różne typy wykresów: Recharts obsługuje różne typy wykresów, w tym wykresy słupkowe, kołowe, warstwowe i inne.

Przykład: Dostosowywanie wykresu słupkowego

Oto jak utworzyć niestandardowy wykres słupkowy:

  1. Zaimportuj niezbędne komponenty:
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. Przygotowanie danych:
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. Wygeneruj wykres słupkowy:
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

Wynik

recharts NPM (Jak to działa dla programistów): Rysunek 2

Przedstawiamy IronPDF

recharts NPM (Jak to działa dla programistów): Rysunek 3 – Strona internetowa IronPDF

IronPDF for Node.js to solidny pakiet npm zaprojektowany w celu ułatwienia generowania plików PDF w aplikacjach Node.js. Umożliwia tworzenie dokumentów PDF na podstawie treści HTML, adresów URL lub istniejących plików PDF. Niezależnie od tego, czy chodzi o generowanie faktur, raportów czy innych dokumentów, IronPDF upraszcza ten proces dzięki intuicyjnemu API i bogatemu zestawowi funkcji.

Najważniejsze cechy IronPDF

  • Konwersja HTML do PDF: Łatwe konwertowanie treści HTML na dokumenty PDF, idealne do generowania dynamicznych plików PDF z treści internetowych.
  • Konwersja adresów URL na pliki PDF: Twórz pliki PDF bezpośrednio z adresów URL, przechwytując zawartość stron internetowych i zapisując je programowo jako pliki PDF.
  • Manipulacja plikami PDF: Łatwe scalanie, dzielenie i edycja istniejących dokumentów PDF. IronPDF umożliwia dodawanie stron, dzielenie dokumentów i wiele więcej.
  • Zabezpieczenia plików PDF: Zabezpiecz swoje dokumenty PDF, szyfrując je hasłami lub stosując podpisy cyfrowe, chroniąc w ten sposób poufne dokumenty przed nieuprawnionym dostępem.
  • Wysoka jakość wyników: Twórz wysokiej jakości dokumenty PDF z precyzyjnym odwzorowaniem tekstu, obrazów i formatowania, zapewniając wierność oryginalnej treści.
  • Kompatybilność międzyplatformowa: IronPDF jest kompatybilny z różnymi platformami, w tym Windows, Linux i macOS, dzięki czemu nadaje się do szerokiego zakresu środowisk programistycznych.
  • Prosta integracja: Łatwo zintegruj IronPDF ze swoimi aplikacjami Node.js, korzystając z pakietu npm. Dobrze udokumentowany interfejs API ułatwia włączenie funkcji generowania plików PDF do projektów.

Niezależnie od tego, czy tworzysz aplikację internetową, skrypt po stronie serwera, czy narzędzie wiersza poleceń, IronPDF umożliwia wydajne i niezawodne tworzenie profesjonalnych dokumentów PDF.

Generowanie pliku PDF za pomocą Recharts przy użyciu IronPDF

Zainstaluj zależności: Najpierw utwórz nowy projekt Next.js (jeśli jeszcze tego nie zrobiłeś) za pomocą poniższego polecenia lub zapoznaj się z bardziej szczegółowymi instrukcjami tutaj.

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

Następnie przejdź do katalogu projektu:

cd recharts-pdf
cd recharts-pdf
SHELL

Zainstaluj wymagane pakiety:

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

API do generowania plików PDF: Pierwszym krokiem jest stworzenie backendowego API do generowania dokumentów PDF. Ponieważ IronPDF działa wyłącznie po stronie serwera, musimy stworzyć API, które będzie wywoływane, gdy użytkownicy będą chcieli generować pliki PDF.

Utwórz plik w ścieżce pages/api/pdf.js i dodaj poniższą treść:

// 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 wymaga klucza licencyjnego, który można uzyskać na stronie Licencjonowanie.

Dodaj poniższy kod, aby zaakceptować adres URL od użytkownika i wygenerować plik PDF z tego adresu do pliku index.js.

"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

Wyjaśnienie kodu

  1. API do generowania plików PDF: Tworzymy punkt końcowy w pages/api/pdf.js przy użyciu IronPDF w celu konwersji adresu URL na dokument PDF.
  2. Komponenty wykresów: Aplikacja zawiera zarówno wykresy liniowe, jak i słupkowe, które wyświetlają przykładowe dane.
  3. Dane wprowadzane przez użytkownika i generowanie plików PDF: Aplikacja udostępnia pole, w którym użytkownicy mogą wpisać adres URL, aby przekonwertować go na plik PDF przy użyciu biblioteki IronPDF.
  4. Pobierz PDF: Po naciśnięciu przycisku "Generuj PDF" generowany i pobierany jest plik PDF strony internetowej pod podanym adresem URL.

Wynik

recharts NPM (Jak to działa dla programistów): Rysunek 4 – Wynik działania poprzedniego kodu

Poniżej znajduje się plik PDF wygenerowany po naciśnięciu przycisku "Generuj PDF" w powyższym wyniku.

recharts NPM (Jak to działa dla programistów): Rysunek 5 – Plik PDF wygenerowany po naciśnięciu przycisku

Licencja IronPDF

recharts NPM (Jak to działa dla programistów): Rysunek 6 – Strona licencyjna IronPDF

Zdobądź bezplatną licencję probną, aby przed zakupem zapoznać się z bogatymi funkcjami IronPDF. Więcej szczegółów na temat licencji wieczystej można znaleźć na stronie licencji.

Umieść tutaj klucz licencyjny:

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

Wnioski

Recharts to potężna biblioteka, która upraszcza tworzenie dynamicznych i interaktywnych wizualizacji danych w aplikacjach React. Łatwość obsługi, możliwość łączenia elementów oraz szerokie opcje dostosowywania sprawiają, że jest to doskonały wybór dla programistów pragnących wzbogacić swoje aplikacje o solidne wykresy.

Niezależnie od tego, czy tworzysz prosty wykres liniowy, czy złożoną wizualizację wieloseryjną, Recharts zapewnia narzędzia niezbędne do osiągnięcia sukcesu. Wypróbuj to w swoim następnym projekcie i przekonaj się o zaletach płynnej wizualizacji danych. IronPDF to potężne narzędzie do generowania plików PDF, które można wykorzystać w połączeniu z Recharts do wyświetlania i udostępniania wszelkich utworzonych wykresów. Programiści poszukujący skutecznego narzędzia do tworzenia i edycji plików PDF powinni wypróbować IronPDF.

Darrius Serrant
Darrius Serrant
  Czat z zespołem inżynierów teraz
Full Stack Software Engineer (WebOps)

Darrius Serrant posiada tytuł licencjata z informatyki z Uniwersytetu Miami i pracuje jako Full Stack WebOps Marketing Engineer w Iron Software. Już od młodych lat zainteresował się kodowaniem, postrzegając informatykę jako zarówno tajemniczą, jak i dostępną, co czyni ją doskonałym medium dla kreatywności ...

Czytaj więcej

Powiązane artykuły

30-dniowy okres próbny → Pełna wersja produktu. Bez ograniczeń. Bez karty. Bezpłatna próba

Zespol wsparcia Iron

Jestesmy online 24 godziny, 5 dni w tygodniu.
Czat
Email
Zadzwon do mnie