Altbilgi içeriğine atla
  1. IronPDF for Node.js
  2. IronPDF for Node.js Blogu
  3. Node Yardım
  4. recharts NPM
NODE YARDıM

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

Darrius Serrant
Darrius Serrant
Güncellendi:

Modern web geliştirmede etkileşimli ve dinamik veri görselleştirmeleri oluşturmak, kullanıcı deneyimini geliştirmek ve veri odaklı kararlar almak için çok önemlidir. Recharts, bağımsız bir React bileşeni üzerine inşa edilmiş, çok yönlü ve kullanımı kolay bir çözüm sunan yeniden tanımlanmış bir grafik kütüphanesidir.

Bu makale, Recharts'ın özelliklerini, avantajlarını ve React uygulamalarınızda kullanmaya başlamanın yollarını keşfedecektir. IronPDF kütüphanesini web sitesi URL'lerinden veya HTML dizgelerinden PDF oluşturmak için inceleyeceğiz ve üretilen grafikleri göstermek için Recharts ile nasıl güzel bir şekilde eşleştiğini göreceğiz.

Neden Recharts'ı Seçmelisiniz?

Recharts npm paketi birçok sebepten dolayı öne çıkmaktadır:

  1. Kullanım Kolaylığı: Deklaratif yaklaşımı, React'in bileşen tabanlı mimarisiyle iyi hizalanarak, React ile zaten aşina olan geliştiriciler için sezgisel bir hale getirir.
  2. Parçalanabilirlik: Recharts bileşenleri son derece parçalanabilir olacak şekilde tasarlanmıştır, geliştiricilerin daha basit bileşenleri birleştirerek karmaşık grafikler oluşturmasını sağlar.
  3. Özelleştirme: Grafiklerinin hemen her yönünü ince ayara tabi tutmalarına olanak tanıyan yüksek derecede özelleştirme sunar.
  4. Duyarlı ve Uyarlanabilir: Recharts, grafiklerin duyarlı ve farklı ekran boyutları ve çözünürlüklerinde iyi uyum sağlamasını garanti eder.

Recharts ile Başlarken

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

Kurulum

npm (önerilen kurulum yöntemi)

Recharts kullanmaya başlamak için, npm veya yarn üzerinden kurmanız gerekir. Node.js ve npm'nin 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

Aşağıda gösterildiği gibi umd veya dev yapım yöntemiyle de Recharts'ı kurabilirsiniz:

Umd

UMD yapımı ayrıca unpkg.com üzerinde de bulunmaktadır:

<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 sürümü

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

Örnek verileri görselleştirmek için basit bir çizgi grafik oluşturacağız.

  1. Recharts React Bileşenlerini İçe Aktar: Gerekli bileşenleri Recharts kütüphanesinden içe aktarın. Uygulama için Recharts modüllerini release 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

  2. Verileri Hazırla: Grafikte gösterilecek 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

  3. Grafiği Çiz: Görsel test platformu iyileştirmesi için Recharts bileşenlerini kullanarak grafiği çizin.

    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 için Nasıl Çalışır): Şekil 1 - Önceki koddan çıktı alınmış PDF

Özelleştirme ve Gelişmiş Özellikler

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

  • Özel İpuçları: Daha detaylı bilgi göstermek için özel ipuçları oluşturabilirsiniz.
  • Animasyonlar: Grafikleri daha etkileyici hale getirmek için animasyonlar ekleyin.
  • Etkileşim: Grafikleri daha etkileşimli hale getirmek için tıklama işleyicileri gibi etkileşimli özellikler uygulayın.

Farklı Grafik Türleri: Recharts bar grafikler, pasta grafikler, alan grafikler ve daha fazlası dahil olmak üzere çeşitli grafik türlerini destekler.

Örnek: Bar Grafiği Özelleştirme

Özelleştirilmiş bir bar grafiği oluşturmanın yolu şu şekildedir:

  1. 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
  1. Verileri Hazırla:
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. Bar Grafiğini Çiz:
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 için Nasıl Çalışır): Şekil 2

IronPDF'i Tanıtma

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

IronPDF for Node.js, Node.js uygulamaları içinde PDF oluşturmayı kolaylaştırmak için tasarlanmış sağlam bir npm paketidir. HTML içeriğinden, URL'lerden veya mevcut PDF dosyalarından PDF belgeleri oluşturmayı sağlar. İster faturalar, raporlar veya diğer belgeler oluşturuyor olun, IronPDF, sezgisel API'si ve kapsamlı özellik seti ile süreci kolaylaştırır.

IronPDF'in Temel Özellikleri

  • HTML'den PDF'ye Dönüşüm: Web içeriğinden dinamik PDF'ler oluşturmak için ideal olan, HTML içeriğini zahmetsizce PDF belgelerine dönüştürün.
  • URL'den PDF'ye Dönüşüm: Web sayfalarının içeriğini yakalayarak ve PDF dosyalarını programatik olarak kaydederek doğrudan URL'lerden PDF'ler oluşturun.
  • PDF Manipülasyonu: Mevcut PDF belgelerini kolayca birleştirin, bölün ve manipüle edin. IronPDF, sayfaları eklemenize, belgeleri bölmenize ve daha fazlasına olanak tanır.
  • PDF Güvenliği: PDF belgelerinizi, onları yetkisiz erişimden koruyan parolalarla şifreleyerek veya dijital imzalar uygulayarak güvence altına alın.
  • Yüksek Kaliteli Çıktı: Metin, görüntüler ve biçimlendirilmenin hassas şekilde render edilmesiyle orijinal içeriğe sadık, 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ı yelpazesi için uygundur.
  • Basit Entegrasyon: IronPDF'i npm paketi ile kolayca Node.js uygulamalarınıza entegre edin. - Well-documented API ile projelerinize PDF oluşturma yeteneklerini eklemek son derece kolaydır.

İster bir web uygulaması, ister bir sunucu tarafı script, ister bir komut satırı aracı geliştiriyor olun, IronPDF kaliteli PDF belgelerini hızlı ve güvenilir bir şekilde oluşturmanızı sağlar.

IronPDF Kullanarak Recharts ile PDF Oluşturma

Bağımlılıkları Yükleyin: İlk olarak, henüz yapmadıysanız, aşağıdaki komutu kullanarak yeni bir Next.js projesi oluşturun veya daha detaylı 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

Sonra, proje dizininize gidin:

cd recharts-pdf
cd recharts-pdf
SHELL

Gerekli paketleri yükleyin:

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şturacak bir arka uç API'si yaratmaktır. IronPDF yalnızca sunucu tarafında çalıştığından, kullanıcılar PDF oluşturmak istediğinde çağırılacak bir API oluşturmamız gerekiyor.

Yol pages/api/pdf.js üzerinde bir dosya 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 alabilirsiniz.

Kullanıcıdan bir URL kabul etmek ve bu URL'den index.js dosyasına bir PDF üretmek 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ı

  1. PDF Üretimi için API: IronPDF kullanarak bir URL'yi PDF dokümanına dönüştürmek için pages/api/pdf.js adresinde bir uç nokta oluşturuyoruz.
  2. Grafik Bileşenleri: Uygulama, örnek verileri görüntüleyen hem Çizgi hem de Bar grafikleri içerir.
  3. Kullanıcı Girişi ve PDF Oluşturma: Uygulama, kullanıcıların IronPDF kütüphanesi kullanarak PDF'ye dönüştürmek için bir URL girmelerini sağlayan bir giriş alanı sağlar.
  4. PDF İndir: 'PDF Oluştur' düğmesine basıldığında, belirtilen URL'nin web sayfasının PDF'si oluşturulur ve indirilir.

Çıktı

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

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

recharts NPM (Geliştiriciler için Nasıl Çalışır): Şekil 5 - PDF oluştur düğmesine basıldığında alınan çıktı PDF

IronPDF Lisansı

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

Ücretsiz bir deneme lisans anahtarı edinin ve satın almadan önce IronPDF'in geniş özelliklerini deneyin. Süresiz lisanslama hakkında daha fazla detay, lisans sayfasında bulunabilir.

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ştirmelerini kolaylaştıran güçlü bir kütüphanedir. Kullanım kolaylığı, uyumluluğu ve geniş özelleştirme seçenekleri, uygulamalarını sağlam grafikler ile geliştirmek isteyen geliştiriciler için mükemmel bir seçimdir.

Basit bir çizgi grafik oluşturuyor ya da karmaşık bir çoklu seri görselleştirme yapıyor olun, Recharts size başarılı olmak için gereken araçları sunar. Bir sonraki projenizde deneyin ve kesintisiz veri görselleştirme avantajlarını deneyimleyin. IronPDF, güçlü bir PDF oluşturma aracıdır ve üretilen herhangi bir grafiği görüntülemek ve paylaşmak için Recharts ile birlikte kullanılabilir. PDF üretimi ve manipülasyonu konusunda etkili bir araç arayan geliştiricilerin IronPDF'i denemesi gerekmektedir.

Darrius Serrant
Darrius Serrant
  Mühendislik takımıyla şimdi sohbet edin
Tam Yığın Yazılım Mühendisi (WebOps)

Darrius Serrant, Miami Üniversitesi'nden Bilgisayar Bilimleri lisans derecesine sahiptir ve Iron Software'de Tam Yığın WebOps Pazarlama Mühendisi olarak çalışmaktadır. Küçük yaşlardan itibaren kodlamaya ilgi duyan Darrius, bilişimi hem gizemli hem de erişilebilir buldu ve onu yaratıcılık ve problem çö...

Daha Fazlasını Oku

İlgili Makaleler

30 günlük deneme → Tam ürün. Sınırlama yok. Kart gerekmez. Ücretsiz Deneme Başlat

Iron Destek Ekibi

Haftanın 5 günü, 24 saat çevrimiçiyiz.
Sohbet
E-posta
Beni Ara