NODE YARDıM

recharts NPM (Geliştiriciler İçin Nasıl Çalışır)

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Güncellendi:Ocak 18, 2026

Modern web geliştirmede etkileşimli ve dinamik veri görselleştirmeleri oluşturmak, kullanıcı deneyimini artırmak ve veri odaklı kararlar almak için kritik öneme sahiptir. Recharts, bağımsız bir React bileşeni üzerine inşa edilen birleşebilir, yeniden tanımlanmış bir grafik kütüphanesidir ve bu tür görselleştirmeler oluşturmak için güçlü ve kullanımı kolay bir çözüm sunar.

Bu makale, Recharts'ın özelliklerini, avantajlarını ve React uygulamalarınızda nasıl başlayabileceğinizi incelemektedir. Ayrıca, IronPDF kütüphanesini kullanarak Web Sitesi URL'lerinden veya HTML dizgilerinden PDF oluşturmayı inceleyeceğiz ve oluşturulan grafiklerin nasıl güzel bir şekilde görüntülendiğini göreceğiz.

Neden Recharts Tercih Etmelisiniz?

Recharts npm paketi birkaç nedenden dolayı öne çıkmaktadır:

Kullanım Kolaylığı: Bildirimsel yaklaşımı, React'in bileşen tabanlı mimarisiyle iyi uyum sağlar, React'i zaten tanıyan geliştiriciler için sezgiseldir.
Birleşebilirlik: Recharts bileşenleri, geliştiricilerin daha basit bileşenleri birleştirerek karmaşık grafikler oluşturmalarına olanak tanıyacak şekilde tasarlanmıştır.
Özelleştirme: Geliştiricilerin neredeyse her yönünü ayarlayabilecekleri yüksek derecede özelleştirme imkanı sunar.
Duyarlı ve Uyarlanabilir: Recharts, grafiklerin farklı ekran boyutlarına ve çözünürlüklerine duyarlı ve iyi uyumlu olduğunu garanti eder.

Recharts ile Başlangıç

Recharts, birleşebilir bir grafik kütüphanesidir. Şimdi, başlayalım:

Kurulum

npm (önerilen kurulum yöntemi)

Recharts'ı kullanmaya başlamak için, npm veya yarn aracılığıyla yüklenmesi gerekir. Node.js ve npm'in yüklü olduğundan emin olun, ardından proje dizininizde aşağıdaki komutu çalıştırın:

npm install recharts

npm install recharts

SHELL

Ayrıca, aşağıda gösterildiği gibi umd veya geliştirme yapı yöntemi ile Recharts'ı yükleyebilirsiniz:

Umd

UMD yapı unpkg.com'da da mevcuttur:

<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

Geliştirme Yapı

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

Temel Kullanım

Bazı örnek verileri görselleştirmek için basit bir çizgi grafik oluşturalım.

Recharts React Bileşenlerini İçe Aktar: Gerekli bileşenleri Recharts kütüphanesinden içe aktarın. Implementasyon için Recharts modüllerini sürüm dalından seçebilirsiniz.

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

Veri Hazırlama: Grafikte görüntülenecek bir veri seti oluşturun.

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

Grafiği Oluşturma: Grafik bileşenlerini kullanarak grafiği render edin ve görsel test platformunu geliştirin.

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

Çıktı

recharts NPM (Geliştiriciler İçin Nasıl Çalışır): Şekil 1 - Önceki koddan çıkarılan PDF

Özelleştirme ve Gelişmiş Özellikler

Temel olarak, Recharts, tüm bileşenleri özelleştirmek ve genişletmek için çeşitli yollar sunar:

Özel İpuçları: Daha ayrıntılı bilgileri göstermek için özel ipuçları oluşturabilirsiniz.
Animasyonlar: Grafikleri daha ilgi çekici hale getirmek için animasyonlar ekleyin.
Etkileşim: Grafikleri daha etkileşimli hale getirmek için tıklama olayları gibi etkileşimli özellikler uygulayın.

Farklı Grafik Türleri: Recharts, çubuk grafikler, pasta grafikler, alan grafikler ve daha fazlasını içeren çeşitli grafik türlerini destekler.

Örnek: Bir Çubuk Grafiği Özelleştirme

Özelleştirilmiş bir çubuk grafik oluşturmanın yolları:

Gerekli Bileşenleri İçe Aktar:

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

Veri Hazırlama:

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

Çubuk Grafiğini Oluşturma:

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

Çıktı

recharts NPM (Geliştiriciler İçin Nasıl Çalışır): Şekil 2

IronPDF Tanıtımı

recharts NPM (Geliştiriciler İçin Nasıl Çalışır): Şekil 3 - IronPDF web sayfası

IronPDF Node.js için, Node.js uygulamaları içinde PDF oluşturmayı kolaylaştırmak için tasarlanmış güçlü bir npm paketidir. HTML içeriğinden, URL'lerden veya mevcut PDF dosyalarından PDF belgeleri oluşturmanıza olanak tanır. Fatura, rapor veya başka belgeler oluştururken, IronPDF'in sezgisel API'si ve kapsamlı özellik seti ile süreç basitleştirilir.

IronPDF'nin Ana Özellikleri

HTML'den PDF Dönüştürme: Web içeriğinden dinamik PDF'ler oluşturmak için ideal olan HTML içeriğini kolayca PDF belgelerine dönüştürün.
URL'den PDF Dönüştürme: Web sayfalarının içeriğini yakalayarak ve programlı olarak onları PDF dosyası olarak kaydederek doğrudan URL'lerden PDF oluşturun.
PDF Manipülasyonu: Mevcut PDF belgelerini birleştirme, ayırma ve kolayca manipüle etme. IronPDF, sayfaları eklemenize, belgeleri ayırmanıza ve daha fazlasını yapmanıza olanak tanır.
PDF Güvenliği: PDF belgelerinizi parolalarla şifreleyerek veya dijital imzalar uygulayarak güvenli hale getirin, böylece hassas belgelerinize yetkisiz erişimi önleyin.
Yüksek Kaliteli Çıktı: Orijinal içeriğe sadık kalarak, metin, resimler ve formatlama ile yüksek kaliteli PDF belgeleri üretin.
Çapraz Platform Uyumluluğu: IronPDF, Windows, Linux ve macOS dahil olmak üzere çeşitli platformlarla uyumludur ve geniş bir geliştirme ortamı için uygundur.
Kolay Entegrasyon: IronPDF'i npm paketi ile Node.js uygulamalarınıza kolayca entegre edin. İyi belgelendirilmiş API, projeinizde PDF oluşturma yeteneklerini kolayca entegre etmenizi sağlar.

İster bir web uygulaması, ister sunucu tarafı script veya komut satırı aracı oluşturuyor olun, IronPDF, profesyonel düzeyde PDF belgelerini verimli ve güvenilir bir şekilde oluşturma yetkisi verir.

Recharts Kullanarak IronPDF ile PDF Oluşturma

Bağımlılıkları Kurun: İlk olarak, henüz oluşturmadıysanız yeni bir Next.js projesi oluşturun veya daha ayrıntılı talimatlar için buraya başvurun.

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

Sonrasında, proje dizinine gidin:

cd recharts-pdf

cd recharts-pdf

SHELL

Gerekli paketleri kurun:

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 Oluşturma API'si: İlk adım, PDF belgesini oluşturmak için bir arka plan API oluşturmak. IronPDF yalnızca sunucu tarafında çalıştığından, kullanıcıların PDF oluşturmak istediklerinde çağırmaları için bir API oluşturmalıyız.

Bir dosya pages/api/pdf.js yolunda oluşturun ve aşağıdaki içerikleri ekleyin:

// 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 bir lisans anahtarı gerektirir ve bu anahtarı Lisanslama sayfasından edinebilirsiniz.

Kullanıcıdan bir URL kabul etmek ve URL'den index.js dosyasına bir PDF oluşturmak için aşağıdaki kodu ekleyin.

"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

Kod Açıklaması

PDF Oluşturma API'si: Bir URL'yi PDF belgesine dönüştürmek için IronPDF kullanarak pages/api/pdf.js adresinde bir uç nokta oluşturuyoruz.
Grafik Bileşenleri: Uygulama, örnek verileri görüntüleyen hem Çizgi hem de Çubuk grafikleri içerir.
Kullanıcı Girişi ve PDF Oluşturma: Uygulama, kullanıcıların IronPDF kütüphanesini kullanarak PDF'ye dönüştürmek istedikleri bir URL girebilecekleri bir giriş alanı sağlar.
PDF İndir: 'PDF Oluştur' düğmesine basıldığında, belirli URL'deki web sayfasının bir PDF'si oluşturulur ve indirilir.

Çıktı

recharts NPM (Geliştiriciler İçin Nasıl Çalışır): Şekil 4 - Önceki kodun çıktısı

Yukarıdaki çıktıda 'PDF Oluştur' düğmesine basıldığında çıktı PDF'si aşağıdadır.

recharts NPM (Geliştiriciler İçin Nasıl Çalışır): Şekil 5 - PDF oluştur düğmesi basıldığında çıkarılan PDF

IronPDF Lisansı

recharts NPM (Geliştiriciler İçin Nasıl Çalışır): Şekil 6 - IronPDF lisanslama sayfası

Ücretsiz deneme lisans anahtarı edinin ve IronPDF'in kapsamlı özelliklerini satın almadan önce kontrol edin. Süresiz lisanslama hakkında daha fazla ayrıntıya lisans sayfasından ulaşabilirsiniz.

Lisans Anahtarını buraya yerleştirin:

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

Sonuç

Recharts, React uygulamalarında dinamik ve etkileşimli veri görselleştirmeleri oluşturmayı kolaylaştıran güçlü bir kütüphanedir. Kullanım kolaylığı, birleşebilirliği ve geniş özelleştirme seçenekleri, uygulamalarını güçlü grafiklerle geliştirmek isteyen geliştiriciler için mükemmel bir seçim haline getirir.

Basit bir çizgi grafik veya karmaşık bir çoklu seri görselleştirmesi oluşturuyorsanız, Recharts başarınız için ihtiyaç duyduğunuz araçları sağlar. Bir sonraki projenizde deneyin ve sorunsuz veri görselleştirmenin faydalarını deneyimleyin. IronPDF, güçlü bir PDF oluşturma aracıdır ve üretilmiş grafiklerin görüntülenmesi ve paylaşılması için Recharts ile birlikte kullanılabilir. PDF üretimi ve manipülasyonu ile ilgili etkili bir araç arayan geliştiriciler, IronPDF'i denemelidir.

Darrius Serrant

Mühendislik ekibiyle şimdi sohbet edin

Tam Yığın Yazılım Mühendisi (WebOps)

Darrius Serrant, Miami Üniversitesi'nden Bilgisayar Bilimi alanında Lisans Derecesine sahip ve Iron Software'de Tam Yığın WebOps Pazarlama Mühendisi olarak çalışıyor. Genç yaşlardan itibaren kodlamaya çekildi, bilgisayar bilimi hem gizemli hem de erişilebilir olarak görüldü ve bu özellik, yaratıcılık ...

Daha Fazla Oku