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 的開發人員感覺直觀。

  2. 組合性：Recharts 組件設計高度可組合，允許開發人員通過組合簡單的組件來構建複雜的圖表。

  3. 自定義：它提供了高度的自定義性，使開發人員能夠調整圖表的幾乎每個方面。

  4. 響應和適應性：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 Generation 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。

const fs = require('fs');
const IronPDF = require('IronPDF');

const urlToPDF = async (url) => {
    const pdf = await IronPDF(url);
    fs.writeFileSync('output.pdf', pdf);
};

urlToPDF('用戶提供的URL');
JAVASCRIPT
"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. 使用 IronPDF 的 PDF 生成 API 已添加至 pages/api/pdf.js

  2. 然後我們添加之前生成的 2 種圖表

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

  4. 生成的 PDF 如下所示

輸出

recharts NPM（開發人員如何使用）：圖4 - 前述代碼的輸出結果

以下是按下上方輸出中的「生成 PDF」按鈕時輸出的 PDF

recharts NPM （開發人員如何使用）：圖 5 - 按下生成 PDF 按鈕時輸出的 PDF

IronPDF License

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.9

> npm i @ironsoftware/ironpdf

報告問題

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

免費 npm 安裝 查看許可證 >

免費獲取

30天試用序號 立即。

15天試用金鑰 立即。

bullet_checked不需要信用卡或帳戶註冊
試用表格已提交
成功。

您的試用金鑰應該在郵件中。
如果不是，請聯繫
support@ironsoftware.com

bullet_test在生产环境中测试
無浮水印
子彈日曆30天完整
功能性產品
bullet_support24/5 技術支援
試用期間支援

感謝您！

您的授權密鑰已發送到提供的電子郵件地址。聯絡我們

24小時升級優惠：

Save 50% 在一
專業 升級

去 專業 涵蓋10位開發人員
和無限專案。

小時

:

分鐘

:

秒钟

升級到專業版

升級

專業

$600 美元

$299 美元

  • 10 位開發人員
  • 10個地點
  • 10個專案
今天 唯一

5 個 .NET 產品只需 2 個價格

IronPDF IronOCR IronXL IronBarcode IronWebscraper

總套件價值：

$7,192 美元

升級價格

今天
唯一

$499 美元

24小時後

$1,098 美元