recharts NPM (Cómo funciona para los desarrolladores)

Introducción

La creación de visualizaciones de datos interactivas y dinámicas en el desarrollo web moderno es crucial para mejorar la experiencia del usuario y tomar decisiones basadas en datos. Recharts, una biblioteca de gráficos redefinida y componible construida sobre un componente React independiente, ofrece una solución robusta y fácil de usar para crear tales visualizaciones.

Este artículo explora las características de Recharts, sus ventajas y cómo empezar a utilizarlo en tus aplicaciones React. También exploraremos la biblioteca IronPDF para generar un PDF a partir de URLs de sitios web o cadenas HTML, y veremos cómo se combina perfectamente con Recharts para mostrar los gráficos producidos.

¿Por qué elegir Recharts?

El paquete npm Recharts destaca por varias razones:

1. Facilidad de uso: Su enfoque declarativo se alinea bien con la arquitectura basada en componentes de React, lo que lo hace intuitivo para los desarrolladores que ya están familiarizados con React.

2. Composabilidad: Los componentes de Recharts están diseñados para ser altamente componibles, permitiendo a los desarrolladores crear gráficos complejos combinando componentes más simples. Personalización: Proporciona un alto grado de personalización, permitiendo a los desarrolladores ajustar casi todos los aspectos de sus gráficos.

3. Responsivo y Adaptable: Recharts garantiza que los gráficos sean responsivos y se adapten bien a diferentes tamaños de pantalla y resoluciones.

Primeros pasos con Recharts

Recharts es una biblioteca de gráficos componibles construida, ahora vamos a empezar:

Instalación de Recargas

npm (método de instalación recomendado)

Para empezar a utilizar Recharts, es necesario instalarlo a través de npm o yarn. Asegúrese de que tiene Node.js y npm instalado, a continuación, ejecute el siguiente comando en el directorio del proyecto:

npm install recharts // recharts installed for release testing

npm install recharts // recharts installed for release testing

También puede instalar Recharts utilizando el método umd o dev build como se muestra a continuación:

Umd

La versión UMD también está disponible en 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>

Desarrollo

$ 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

Demo

Uso básico

Vamos a crear un sencillo gráfico de líneas para visualizar algunos datos de ejemplo.

1. Importar Componentes de Recharts React: Importe los componentes necesarios de la biblioteca Recharts. Puede seleccionar módulos de Recharts de la rama de lanzamiento para su implementación.

  import React from 'react';
  import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

js

2. Preparar datos: Crea un conjunto de datos para mostrar en el gráfico.

  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

3. Representar el gráfico: Use los componentes de Recharts para representar el gráfico y mejorar la plataforma de pruebas visuales.

  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

Salida

Personalización y funciones avanzadas

En principio, Recharts ofrece varias formas de personalizar y ampliar todos los componentes:

Información sobre herramientas personalizadas: Puede crear información sobre herramientas personalizada para mostrar información más detallada.

Animaciones: Añade animaciones para hacer tus gráficos más atractivos.

Interactividad: Implementa características interactivas como controladores de clics para hacer que tus gráficos sean más interactivos.

• Diferentes tipos de gráficos: Recharts admite varios tipos de gráficos, incluidos gráficos de barras, gráficos circulares, gráficos de área y más.

Ejemplo: Personalización de un gráfico de barras

A continuación se explica cómo crear un gráfico de barras personalizado:

1. Importar componentes necesarios:

import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

js

2. Preparar Datos:

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

3. Renderizar el gráfico de barras:

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

Salida

Presentación de IronPDF

IronPDF for Node.js es un paquete npm robusto diseñado para facilitar la generación de PDF dentro de aplicaciones Node.js. Permite crear documentos PDF a partir de contenidos HTML, URL o archivos PDF existentes. Ya se trate de generar facturas, informes u otros documentos, IronPDF simplifica el proceso con su intuitiva API y su amplio conjunto de funciones.

Características principales de IronPDF

Conversión de HTML a PDF: Convierte fácilmente contenido HTML en documentos PDF, ideal para generar PDFs dinámicos a partir de contenido web.

Conversión de URL a PDF: Crea PDFs directamente desde URLs, capturando el contenido de las páginas web y guardándolas como archivos PDF de manera programática.

Manipulación de PDF: Fusiona, divide y manipula documentos PDF existentes con facilidad. IronPDF le permite añadir páginas, dividir documentos y mucho más.

Seguridad PDF: Asegure sus documentos PDF cifrándolos con contraseñas o aplicando firmas digitales, protegiendo sus documentos sensibles del acceso no autorizado.

Salida de Alta Calidad: Produce documentos PDF de alta calidad con una representación precisa de texto, imágenes y formato, asegurando la fidelidad al contenido original.

Compatibilidad multiplataforma: IronPDF es compatible con varias plataformas, incluyendo Windows, Linux y macOS, lo que lo hace adecuado para una amplia gama de entornos de desarrollo.

Integración sencilla: Integra fácilmente IronPDF en tus aplicaciones de Node.js utilizando su paquete npm. La API bien documentada facilita la incorporación de funciones de generación de PDF a sus proyectos.

Tanto si está creando una aplicación web, un script del lado del servidor o una herramienta de línea de comandos, IronPDF le permite crear documentos PDF de calidad profesional de forma eficaz y fiable.

Generación de un PDF con Recharts mediante IronPDF

Instalar dependencias: Primero, crea un nuevo proyecto de Next.js (si aún no lo has hecho) utilizando el siguiente comando, o consulta aquí para obtener instrucciones más detalladas.

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"

A continuación, vaya al directorio de su proyecto:

cd recharts-pdf

cd recharts-pdf

Instale los paquetes necesarios utilizando el siguiente comando 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

API de Generación de PDF: El primer paso es crear una API de backend para generar el documento PDF. Dado que IronPDF sólo se ejecuta en el servidor, debemos crear una API a la que llamar cuando los usuarios quieran generar PDFs.

Crea un archivo en la ruta pages/api/pdf.js y añade el siguiente contenido:

// 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

IronPDF requiere una clave de licencia, consíguela aquí y colócala en el código anterior

Añade el siguiente código para aceptar una URL del usuario y generar un PDF a partir de la URL en el archivo index.js.

"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

Código Explicación

1. API para la generación de PDF utilizando IronPDF se añade en pages/api/pdf.js

2. A continuación, añadimos los dos tipos de gráficos anteriores

3. A continuación, añadimos un campo de entrada y un botón para aceptar la URL del usuario y activar la generación del PDF

4. A continuación se muestra el PDF generado

Salida

A continuación se muestra el PDF resultante cuando se pulsa el botón "Generar PDF" en la salida anterior

Licencia IronPDF

Obtain a free trial license key para probar las extensas características de IronPDF antes de la compra. Más detalles sobre las licencias perpetuas se pueden encontrar en la página de licencia.

Coloque aquí la clave de licencia:

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

js

Conclusión

Recharts es una potente librería que simplifica la creación de visualizaciones de datos dinámicas e interactivas en aplicaciones React. Su facilidad de uso, capacidad de composición y amplias opciones de personalización lo convierten en una opción excelente para los desarrolladores que deseen mejorar sus aplicaciones con gráficos robustos.

Tanto si está construyendo un simple gráfico de líneas como una compleja visualización multiserie, Recharts le proporciona las herramientas que necesita para tener éxito. Pruébelo en su próximo proyecto y experimente las ventajas de una visualización de datos sin fisuras. IronPDF es una herramienta potente para la generación de PDF y puede usarse en conjunto con Recharts para mostrar y compartir cualquier gráfico producido. Los desarrolladores que busquen una herramienta eficaz para la producción y manipulación de PDF deben probar IronPDF.