1. IronPDF for Node.js
  2. IronPDF for Node.js博客
  3. 节点帮助
  4. recharts NPM
节点帮助

recharts NPM（开发者使用指南）

发布 2024年八月13日
分享:

介绍

在现代Web开发中创建交互式和动态数据可视化对于提升用户体验和做出数据驱动的决策至关重要。 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生成API：第一步是创建一个后端API来生成PDF文档。由于IronPDF只在服务器端运行，我们必须创建一个API，当用户需要生成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();
    }
}
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

IronPDF需要许可证密钥，请从 *这里*** 将以下代码添加到 index.js 文件中，以接受用户输入的 URL 并从该 URL 生成 PDF。

const IronPDF = require('iron-pdf');

async function generatePdfFromUrl(url) {
    const browser = await IronPDF.Engine.Browser.BrowserFetcher();
    const page = await browser.newPage();
    await page.goto(url);

    const pdf = await IronPDF.PdfDocument.createFromPage(page);
    await pdf.saveAs('output.pdf');

    await browser.close();
}

// Example usage:
generatePdfFromUrl('http://example.com');
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. 然后我们添加我们之前生成的两种图表

  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。

< 前一页
NPM 反冲（开发人员的工作原理）
下一步 >
d3 NPM（开发人员如何使用）

使用 npm 安装

版本： 2024.9

> npm i @ironsoftware/ironpdf

报告问题

准备开始了吗？ 版本： 2024.9 刚刚发布

免费 npm 安装 查看许可证 >

获取您的免费

30天试用密钥 立即。

15天试用密钥 立即。

bullet_checked无需信用卡或创建账户
试用表格已提交
成功地。

您的试用密钥应在电子邮件中。
如果不是，请联系
support@ironsoftware.com

子弹测试测试生产环境
无水印
子弹日历30天全功能使用
功能性产品
子弹支持24/5技术支持
试用期间的支持

谢谢！

您的许可证密钥已发送到所提供的电子邮件。联系我们

24小时升级优惠：

Save 50% 在一个
专业 升级

去 专业 支持10位开发者
和无限项目。

小时

:

分钟

:

秒

升级到Professional

升级

专业

$600 美元

$299 美元

  • 10位开发者
  • 10个位置
  • 10个项目
今天 只有

5个.NET产品，两件的价格

IronPDF IronOCR IronXL IronBarcode IronWebscraper

套件总价值：

$7,192 美元

升级价格

今天
只有

$499 美元

24小时后

$1,098 美元