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

recharts NPM（开发者使用指南）

Darrius Serrant
Darrius Serrant
2024年八月13日
分享:

介绍

在现代网页开发中创建互动和动态数据可视化对于提升用户体验和做出数据驱动的决策至关重要。 Recharts 是一个基于独立 React 组件构建的可组合、重新定义的图表库，为创建此类可视化提供了强大且易于使用的解决方案。

本文探讨了Recharts的功能、优势，以及如何在React应用中开始使用它。 我们还将研究IronPDF库，以从网站URL或HTML字符串生成PDF，并且我们将看到它如何与Recharts完美配合以显示生成的图表。

为什么选择Recharts？

Recharts npm 包因多种原因而脱颖而出：

  1. 易用性：其声明式方法与 React 的基于组件的架构很好地契合，使得已经熟悉 React 的开发者觉得直观。

  2. 组合性：Recharts组件设计为高度可组合，允许开发人员通过组合更简单的组件构建复杂的图表。 自定义：它提供了高度的自定义，允许开发人员调整图表的几乎每个方面。

  3. 响应式和自适应：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
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

开发版本

$ 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

演示

基本用法

让我们创建一个简单的折线图来可视化一些示例数据。

  1. 导入 Recharts React 组件：从 Recharts 库中导入必要的组件。 您可以从发布分支中选择 Recharts 模块进行实现。
  import React from 'react';
  import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
js
JAVASCRIPT
  1. 准备数据：创建一个将在图表中显示的数据集。
  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 },
      ];
js
JAVASCRIPT
  1. 渲染图表：使用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;
js
JAVASCRIPT

输出

recharts NPM（它是如何为开发者工作的）：图1 - 从前面的代码输出的PDF

自定义和高级功能

原则上，Recharts 提供多种方式来定制和扩展所有组件：

自定义工具提示：您可以创建自定义工具提示以显示更详细的信息。

动画：添加动画以使您的图表更加吸引人。

交互性：实现点击处理程序等交互功能，使您的图表更具交互性。

  • 不同的图表类型：Recharts支持多种图表类型，包括条形图、饼图、区域图等。

示例：自定义条形图

以下是创建自定义条形图的方法：

  1. 导入必要的组件：
import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
js
JAVASCRIPT
  1. 准备数据：
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 },
    ];
js
JAVASCRIPT
  1. 渲染条形图：
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;
js
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转换：通过编程方式直接从URL创建PDF，捕获网页内容并将其保存为PDF文件。

PDF 操作：轻松合并、拆分和操作现有的 PDF 文档。 IronPdf 允许您追加页面、分割文档等。

PDF安全性：通过密码加密或应用数字签名来保护您的PDF文档，以防止未经授权的访问，确保您的敏感文档安全。

高质量输出：生成高质量的PDF文档，精确呈现文本、图像和格式，确保对原始内容的忠实再现。

跨平台兼容性：IronPDF 兼容多个平台，包括 Windows、Linux 和 macOS，因此适合各种开发环境。

简单集成：通过其 npm 包轻松将 IronPDF 集成到您的 Node.js 应用程序中。 文档详尽的 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 命令安装所需的包：

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();
    }
}
js
JAVASCRIPT

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>
  );
}
js
JAVASCRIPT

代码解释

  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";
js
JAVASCRIPT

结论

Recharts 是一个强大的库，可简化在 React 应用程序中创建动态和交互式数据可视化的过程。 它的易用性、组合性和广泛的自定义选项使其成为开发人员在应用程序中增强强大图表的绝佳选择。

无论您是在构建简单的折线图还是复杂的多系列可视化图表，Recharts 都为您提供成功所需的工具。 在您的下一个项目中试用它，体验无缝数据可视化的优势。 IronPDF 是一个强大的PDF生成工具，可以与Recharts结合使用，以显示和共享生成的任何图表。 寻求帮助处理 PDF 制作和操作的有效工具的开发人员必须尝试使用 IronPDF。

Darrius Serrant
Darrius Serrant
  立即与工程团队聊天
全栈软件工程师（WebOps）

达瑞乌斯·塞兰特拥有迈阿密大学计算机科学学士学位，目前在Iron Software担任全栈WebOps营销工程师。从小对编码的热爱使他认为计算机既神秘又易接近，成为创意和解决问题的完美媒介。

在Iron Software，达瑞乌斯乐于创造新事物并简化复杂概念，使其更易于理解。作为我们在职开发者之一，他还自愿教授学生，将他的专业知识传授给下一代。

对达瑞乌斯而言，他的工作之所以令人满足，是因为它具有价值并产生了真正的影响。

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

使用 npm 安装

版本：2025.5

> npm i @ironsoftware/ironpdf

报告问题

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

免费开始
npm 下载 开始免费试用
查看许可证 >
Experience the full power of IronPDF 开始免费试用
Textlogo Iron Suite related to recharts NPM（开发者使用指南）

IronPDF 是 IRON 的一部分套装

10 个 .NET API 产品用于您的办公文档

以2个产品的价格获取10个产品   开始免费试用