NODE 說明

recharts NPM（開發者的使用方法）

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

Darrius Serrant

已更新:2026年1月18日

在現代網頁開發中建立互動且動態的資料視覺化對於提升使用者體驗和做出資料驅動的決策是至關重要的。 Recharts是一個基於獨立React組件構建的可組合、重新定義的圖表程式庫，為建立此類視覺化提供了一個強大且易於使用的解決方案。

本文探討了Recharts的功能、其優勢，以及如何在您的React應用程式中開始使用它。我們還將研究IronPDF程式庫，以從網站URL或HTML字串生成PDF，並查看它如何與Recharts完美配合以顯示生成的圖形。

為什麼選擇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

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

Dev build

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是一個強大的npm包，設計用於在Node.js應用程式中促進PDF生成。它使從HTML內容、URL或現有PDF文件建立PDF文件成為可能。無論是生成發票、報告，還是其他文件，IronPDF憑借其直觀的API和豐富的特性集簡化了這一過程。

IronPDF的主要特性

HTML到PDF轉換：輕鬆將HTML內容轉換為PDF文件，非常適合從網頁內容生成動態PDF。
URL到PDF轉換：直接從URLs建立PDF，捕獲網頁內容並以程式方式將其保存為PDF文件。
PDF操作：輕鬆合併、拆分和操作現有的PDF文件。 IronPDF允許您附加頁面、拆分文件等。
PDF安全：通過設置密碼加密或應用數位簽章來保護您的PDF文件，以防止未經授權的存取，保護您的敏感文件。
高品質輸出：產生高品質的PDF文件，精確呈現文字、圖片和格式，確保與原始內容的忠實一致。
跨平台相容性：IronPDF與多個平台相容，包括Windows、Linux和macOS，適合各種開發環境。
簡單整合：輕鬆將IronPDF整合到您的Node.js應用程式中，使用其npm包。詳細說明的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：第一步是建立一個後端API來生成PDF文件。由於IronPDF僅能在伺服器端運行，我們必須建立一個API以便當使用者想生成PDF時調用。

在路徑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並從該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：我們在pages/api/pdf.js建立一個端點，使用IronPDF將URL轉換為PDF文件。
圖表組件：應用程式包括顯示樣本資料的折線圖和條形圖。
使用者輸入和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。