노드 도움말

NPM 재설계 (개발자를 위한 작동 방식)

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

업데이트됨:1월 18, 2026

현대 웹 개발에서 상호작용적이고 동적인 데이터 시각화를 구현하는 것은 사용자 경험을 향상시키고 데이터 기반 의사결정을 내리는 데 매우 중요합니다. Recharts는 독립적인 React 컴포넌트를 기반으로 구축된, 구성 가능하고 새롭게 정의된 차트 라이브러리로, 이러한 시각화를 생성하기 위한 강력하고 사용하기 쉬운 솔루션을 제공합니다.

이 글에서는 Recharts의 기능, 장점, 그리고 React 애플리케이션에서 Recharts를 사용하는 방법을 살펴봅니다. 또한 웹사이트 URL이나 HTML 문자열에서 PDF를 생성하는 IronPDF 라이브러리에 대해서도 살펴보고, 생성된 그래프를 표시하기 위해 Recharts와 어떻게 잘 연동되는지 알아보겠습니다.

리차츠를 선택해야 하는 이유는 무엇일까요?

Recharts npm 패키지는 여러 가지 이유로 눈에 띕니다.

사용 편의성: 선언적 접근 방식은 React의 컴포넌트 기반 아키텍처와 잘 어울리므로 React에 이미 익숙한 개발자에게 직관적입니다.
구성 가능성: Recharts 구성 요소는 높은 수준의 구성 가능성을 갖도록 설계되어 있어 개발자는 더 간단한 구성 요소를 조합하여 복잡한 차트를 구축할 수 있습니다.
맞춤 설정: 높은 수준의 맞춤 설정 기능을 제공하여 개발자가 차트의 거의 모든 측면을 조정할 수 있습니다.
반응형 및 적응형 디자인: Recharts는 차트가 반응형 디자인을 지원하여 다양한 화면 크기와 해상도에 잘 적응하도록 보장합니다.

Recharts 시작하기

Recharts는 구성 가능한 차트 라이브러리입니다. 자, 그럼 시작하겠습니다.

설치

npm (권장 설치 방법)

Recharts를 사용하려면 npm 또는 yarn을 통해 설치해야 합니다. Node.js 와 npm이 설치되어 있는지 확인한 후 프로젝트 디렉토리에서 다음 명령어를 실행하세요.

npm install recharts

npm install recharts

SHELL

아래와 같이 umd 또는 dev 빌드 방식을 사용하여 Recharts를 설치할 수도 있습니다.

움드

UMD 버전은 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

개발 빌드

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

데모

기본 사용법

샘플 데이터를 시각화하기 위해 간단한 선 그래프를 만들어 보겠습니다.

Recharts React 컴포넌트 가져오기: Recharts 라이브러리에서 필요한 컴포넌트를 가져옵니다. 릴리스 브랜치에서 구현할 Recharts 모듈을 선택적으로 가져올 수 있습니다.

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

데이터 준비: 차트에 표시할 데이터 세트를 생성합니다.

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

차트 렌더링: 시각적 테스트 플랫폼 향상을 위해 Recharts 구성 요소를 사용하여 차트를 렌더링합니다.

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

출력

recharts NPM (개발자를 위한 동작 원리): 그림 1 - 이전 코드에서 출력된 PDF

맞춤 설정 및 고급 기능

원칙적으로 Recharts는 모든 구성 요소를 사용자 정의하고 확장할 수 있는 다양한 방법을 제공합니다.

사용자 지정 툴팁: 더 자세한 정보를 표시하는 사용자 지정 툴팁을 만들 수 있습니다.
애니메이션: 차트에 애니메이션을 추가하여 더욱 흥미롭게 만드세요.
상호작용성: 클릭 핸들러와 같은 상호작용 기능을 구현하여 차트를 더욱 상호작용적으로 만드세요.

다양한 차트 유형: Recharts는 막대 차트, 원형 차트, 영역 차트 등 다양한 차트 유형을 지원합니다.

예시: 막대 차트 사용자 지정

사용자 지정 막대 차트를 만드는 방법은 다음과 같습니다.

필요한 구성 요소 가져오기:

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

데이터 준비:

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

막대 그래프를 렌더링합니다.

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

출력

recharts NPM (개발자를 위한 동작 원리): 그림 2

IronPDF 소개합니다

recharts NPM (개발자를 위한 동작 원리): 그림 3 - IronPDF 웹페이지

IronPDF for Node.js 는 Node.js 애플리케이션 내에서 PDF 생성을 용이하게 하도록 설계된 강력한 npm 패키지입니다. 이 도구를 사용하면 HTML 콘텐츠, URL 또는 기존 PDF 파일에서 PDF 문서를 생성할 수 있습니다. IronPDF 직관적인 API와 광범위한 기능 세트를 통해 송장, 보고서 또는 기타 문서를 생성하는 과정을 간소화합니다.

IronPDF 의 주요 기능

HTML을 PDF로 변환: HTML 콘텐츠를 PDF 문서로 손쉽게 변환할 수 있어 웹 콘텐츠에서 동적 PDF를 생성하는 데 이상적입니다.
URL을 PDF로 변환: URL에서 직접 PDF를 생성하여 웹 페이지의 콘텐츠를 캡처하고 프로그램 방식으로 PDF 파일로 저장합니다.
PDF 조작: 기존 PDF 문서를 손쉽게 병합, 분할 및 조작할 수 있습니다. IronPDF 사용하면 페이지를 추가하고, 문서를 분할하는 등의 작업을 수행할 수 있습니다.
PDF 보안: PDF 문서를 암호로 암호화하거나 디지털 서명을 적용하여 무단 접근으로부터 중요한 문서를 보호하세요.
고품질 출력: 텍스트, 이미지 및 서식을 정확하게 표현하여 원본 콘텐츠에 충실한 고품질 PDF 문서를 생성합니다.
크로스 플랫폼 호환성: IronPDF Windows, Linux, macOS를 비롯한 다양한 플랫폼과 호환되므로 폭넓은 개발 환경에 적합합니다.
간편한 통합: IronPDF의 npm 패키지를 사용하여 Node.js 애플리케이션에 IronPDF 쉽게 통합할 수 있습니다. 잘 정리된 API 덕분에 프로젝트에 PDF 생성 기능을 손쉽게 통합할 수 있습니다.

웹 애플리케이션, 서버 측 스크립트 또는 명령줄 도구를 개발하든 IronPDF 사용하면 전문가 수준의 PDF 문서를 효율적이고 안정적으로 생성할 수 있습니다.

IronPDF 사용하여 Recharts로 PDF 생성하기

필수 구성 요소 설치: 먼저 다음 명령어를 사용하여 새 Next.js 프로젝트를 생성하세요(아직 생성하지 않았다면). 또는 자세한 지침은 여기를 참조하세요.

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

다음으로 프로젝트 디렉토리로 이동하세요.

cd recharts-pdf

cd recharts-pdf

SHELL

필요한 패키지를 설치하세요:

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 생성 API: 첫 번째 단계는 PDF 문서를 생성하는 백엔드 API를 만드는 것입니다. IronPDF 서버 측에서만 실행되므로 사용자가 PDF를 생성하고자 할 때 호출할 API를 만들어야 합니다.

pages/api/pdf.js 경로에 파일을 생성하고 아래 내용을 추가하세요:

// 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 사용하려면 라이선스 키가 필요하며 , 해당 키는 라이선스 페이지 에서 얻을 수 있습니다.

사용자로부터 URL을 받아 PDF를 생성하여 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

코드 설명

PDF 생성 API: IronPDF를 사용하여 URL을 PDF 문서로 변환하는 끝점을 pages/api/pdf.js에 생성합니다.
차트 구성 요소: 이 애플리케이션에는 샘플 데이터를 표시하는 선 차트와 막대 차트가 모두 포함되어 있습니다.
사용자 입력 및 PDF 생성: 이 앱은 사용자가 URL을 입력하여 IronPDF 라이브러리를 사용하여 PDF로 변환할 수 있는 입력 필드를 제공합니다.
PDF 다운로드: 'PDF 생성' 버튼을 누르면 지정된 URL의 웹 페이지 PDF 파일이 생성되어 다운로드됩니다.

출력

recharts NPM (개발자를 위한 동작 원리): 그림 4 - 이전 코드의 출력

위의 출력에서 'PDF 생성' 버튼을 눌렀을 때 생성되는 PDF 파일은 아래와 같습니다.

recharts NPM (개발자를 위한 동작 원리): 그림 5 - PDF 생성 버튼이 눌려졌을 때 출력된 PDF

IronPDF 라이선스

recharts NPM (개발자를 위한 동작 원리): 그림 6 - IronPDF 라이선스 페이지

구매 전에 IronPDF의 다양한 기능을 확인해 보려면 무료 평가판 라이선스 키를 받으세요 . 영구 라이선스에 대한 자세한 내용은 라이선스 페이지에서 확인할 수 있습니다.

라이선스 키를 여기에 입력하세요:

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

결론

Recharts는 React 애플리케이션에서 동적이고 상호작용적인 데이터 시각화를 간편하게 생성할 수 있도록 도와주는 강력한 라이브러리입니다. 사용 편의성, 구성 가능성 및 광범위한 사용자 지정 옵션 덕분에 강력한 차트를 사용하여 애플리케이션을 향상시키려는 개발자에게 탁월한 선택입니다.

단순한 선 그래프를 만들든 복잡한 다중 시리즈 시각화를 만들든, Recharts는 성공에 필요한 도구를 제공합니다. 다음 프로젝트에서 한번 시도해 보시고, 매끄러운 데이터 시각화의 이점을 경험해 보세요. IronPDF 는 강력한 PDF 생성 도구이며, Recharts와 함께 사용하여 생성된 그래프를 표시하고 공유할 수 있습니다. PDF 생성 및 편집에 도움이 되는 효과적인 도구를 찾는 개발자라면 IronPDF 사용해 봐야 합니다.

다리우스 세란트

지금 바로 엔지니어링 팀과 채팅하세요

풀스택 소프트웨어 엔지니어 (웹 운영)

다리우스 세런트는 마이애미 대학교에서 컴퓨터 과학 학사 학위를 받았으며, Iron Software에서 풀 스택 웹 운영 마케팅 엔지니어로 근무하고 있습니다. 어린 시절부터 코딩에 매료되었던 그는 컴퓨팅이 신비로우면서도 접근하기 쉬운 분야라고 생각했고, 창의력과 문제 해결 능력을 발휘하기에 완벽한 매체라고 여겼습니다.

Iron Software에서 다리우스는 새로운 것을 만들고 복잡한 개념을 단순화하여 더 쉽게 이해할 수 있도록 하는 것을 즐깁니다. 그는 사내 개발자로서 학생들을 가르치는 데에도 자원하여 차세대 인재들과 전문 지식을 공유하고 있습니다.

다리우스에게 있어 그의 일은 가치 있고 실질적인 영향을 미치기 때문에 보람 있는 일입니다.