1. IronPDF for Node.js
  2. IronPDF for Node.js 部落格
  3. 節點幫助
  4. recharts NPM
節點幫助

recharts NPM（開發人員如何使用）

發佈 2024年8月13日
分享:

介紹

在現代網路開發中，創建互動和動態的數據視覺化對於提升用戶體驗和做出數據驅動的決策至關重要。 Recharts，一個可組合性、重新定義的圖表庫，基於獨立的 React 元件構建，提供了一種強大且易於使用的解決方案，用於創建這樣的可視化圖表。

本文探討 Recharts 的功能、優勢，以及如何在您的 React 應用程式中開始使用它。 我們也將調查IronPDF將網站 URL 或 HTML 字串生成 PDF 的庫，我們將看到它與 Recharts 搭配如何展示生成的圖表。

為什麼選擇 Recharts？

Recharts npm 套件之所以突出，有以下幾個原因：

  1. 易於使用：其聲明式的方法與 React 的基於組件的架構高度契合，對於已熟悉 React 的開發人員來說非常直觀。

    1. 可組合性：Recharts 元件被設計為高度可組合，使開發者能夠透過組合較簡單的元件來建立複雜的圖表。
      自定義：它提供高度的自定義能力，使開發者能夠調整圖表幾乎每個方面。
  2. 響應式和適應性：Recharts 保證圖表具有響應能力，並能很好地適應不同的螢幕尺寸和解析度。

開始使用 Recharts

Recharts 是一個可組合的圖表庫，現在讓我們開始：

Recharts 安裝

npm（推薦的安裝方法）

要開始使用 Recharts，您需要通過 npm 或 yarn 安裝它。 確保您已安裝 Node.js 和 npm，然後在項目目錄中運行以下命令：

npm install recharts // recharts installed for release testing
npm install recharts // recharts installed for release testing
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

您也可以使用如下所示的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>
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

開發版本

$ 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
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

展示

基本用法

讓我們創建一個簡單的折線圖來可視化一些範例數據。

  1. 匯入 Recharts React 元件：從 Recharts 函式庫匯入必要的元件。 您可以從發佈分支中挑選 Recharts 模組進行實施。
import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
```2. **Prepare Data**: Create a dataset to be displayed in the chart.

```cs
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 },
    ];
```3. **Render the Chart**: Use the Recharts components to render the chart for visual testing platform enhancement.

```cs
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;
import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
```2. **Prepare Data**: Create a dataset to be displayed in the chart.

```cs
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 },
    ];
```3. **Render the Chart**: Use the Recharts components to render the chart for visual testing platform enhancement.

```cs
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;
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

輸出

recharts NPM（開發人員如何使用）：圖 1 - 前述程式碼產生的 PDF

自訂和進階功能

原則上，Recharts 提供多種方式來自訂和擴展所有元件：

自定義工具提示：您可以建立自定義工具提示以顯示更詳細的信息。

動畫：加入動畫，使您的圖表更具吸引力。

互動性：實現點擊處理程序等互動特性，使您的圖表更加互動。

  • 不同的圖表類型：Recharts 支援各種圖表類型，包括柱狀圖、圓餅圖、面積圖等。

範例：自訂條形圖

以下是建立自訂長條圖的方法：

  1. 匯入必要元件：
import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
```2. **Prepare Data**:

```cs
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 },
    ];
```3. **Render the Bar Chart**:

```cs
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;
import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
```2. **Prepare Data**:

```cs
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 },
    ];
```3. **Render the Bar Chart**:

```cs
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;
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

輸出

recharts NPM（為開發者展示其運作方式）：圖 2

介紹 IronPDF

recharts NPM（適用於開發者的工作方式）：圖3 - IronPDF 網頁

IronPDF是一個強大的 npm 套件，旨在促進 Node.js 應用程式中的 PDF 生成。 它可以從 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，非常適合廣泛的開發環境。

簡單整合： 使用其 npm 套件，輕鬆將 IronPDF 整合到您的 Node.js 應用程式中。 良好記錄的 API 使在您的專案中整合 PDF 生成功能變得簡單明瞭。

無論您是在構建 web 應用程序、伺服器端腳本還是命令行工具，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"
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

接著，導航至您的專案目錄：

cd recharts-pdf
cd recharts-pdf
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

使用以下的 yarn 命令來安裝所需的套件：

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add recharts
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add recharts
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

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();
    }
}
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

IronPDF 需要許可證金鑰，從這裡獲取這裡並將其放置在上述程式碼中

將以下程式碼添加到 index.js 文件中，以接受使用者輸入的 URL 並從該 URL 生成 PDF。

"use client";
import { useState, HTMLDivElement } 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>{" "}
          </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, HTMLDivElement } 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>{" "}
          </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>
  );
}
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

程式碼說明

  1. 在 pages/api/pdf.js 中添加使用 IronPDF 的 PDF 生成 API。

  2. 然後我們新增先前製作的兩種類型圖表。

  3. 然後我們添加一個輸入欄位和一個按鈕，以接受用戶的 URL 並觸發 PDF 生成。

  4. 生成的 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 = "Add Your key here";
import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

結論

Recharts 是一個強大的函式庫，能夠簡化在 React 應用程式中創建動態和互動式數據可視化的過程。 它使用簡單、可組合性強，且提供廣泛的自訂選項，是開發人員希望透過穩健的圖表來提升其應用程式的絕佳選擇。

無論您是在構建簡單的折線圖或是複雜的多系列可視化，Recharts 都提供了您成功所需的工具。 在您的下一個專案中嘗試一下，體驗無縫數據可視化的好處。 IronPDF是一個強大的 PDF 生成工具，可以與 Recharts 結合使用，以顯示和分享生成的任何圖表。 尋找有效工具以協助 PDF 生成和處理的開發人員必須嘗試 IronPDF。

< 上一頁
recoil NPM（開發人員如何使用）
下一個 >
d3 NPM（對開發者的運作方式）

使用 npm 安裝

版本：2024.11

> npm i @ironsoftware/ironpdf

報告問題

準備開始了嗎？ 版本: 2024.11 剛剛發布

免費 npm 安裝 查看許可證 >