import {PdfDocument} from "@ironsoftware/ironpdf"; (async () => { // Create a PDF from an HTML string const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>"); // Export the PDF to a file await pdf.saveAs("output.pdf"); // Advanced Example with HTML Assets // Load external HTML assets: Images, CSS, and JavaScript. const htmlContentWithAssets = "<img src='icons/iron.png'>"; const advancedPdf = await PdfDocument.fromHtml(htmlContentWithAssets); // Save the PDF with loaded assets await advancedPdf.saveAs("html-with-assets.pdf"); })();

节点帮助

Chartjs Node.js（开发者如何使用）

发布 2024年七月1日

在数据驱动的当今世界，以可视化方式呈现信息已成为有效沟通的基石。无论是分析商业趋势、跟踪研究进展，还是简单地理解复杂的数据集，创建引人注目的可视化效果的能力都是无价之宝。Chart.js Node 是一个功能强大、用途广泛的 JavaScript 库，已成为开发人员轻松创建精美图表的首选工具。

在本文中，我们将探讨 Node.js 的 Chart.js 服务，探索其功能、优点以及如何利用它来释放 Node.js 应用程序中数据可视化的全部潜力。

什么是 Chart.js？

Chart.js 是一个开源 JavaScript 库，允许开发人员为网络应用程序创建交互式、响应式图表和图形。Chart.js 由 Nick Downie 开发，因其易用性、灵活性和针对每种图表类型的大量自定义选项而广受欢迎。利用 Chart.js，开发人员可以快速创建各种图表，包括折线图、条形图、饼图、雷达图等，从而满足广泛的可视化需求。

Chart.js 的主要功能

易用性： Chart.js 设计为初学者友好型，其简单直观的应用程序接口可让用户轻松上手使用 JavaScript 创建图表。
响应式设计： 使用 Chart.js 创建的图表可自动适应不同的屏幕尺寸和设备，确保跨平台的一致浏览体验。
自定义： Chart.js 提供了大量自定义图表外观和行为的选项，包括颜色、字体、工具提示、动画等。
交互性： 默认情况下，使用 Chart.js 生成的图表是交互式的，用户可以将鼠标悬停在数据点上，查看更多信息并与图表进行动态交互。
插件系统： Chart.js拥有一个强大的插件系统，使开发人员能够扩展其功能，并根据需要添加新的图表类型、动画和功能。

将 Chart.js 与 Node.js 结合使用

虽然 Chart.js 主要设计用于 Web 浏览器的客户端，但它也可以与 Node.js 应用程序集成，在服务器端动态生成图表。这就为在各种基于 Node.js 的项目中使用 Chart.js 提供了广泛的可能性，例如生成 PDF 报告、为仪表盘创建数据可视化或生成 PNG 格式的图像用于社交媒体共享。

使用将 Chart.js 与 Node.js 结合使用此外，开发人员还可以利用 "chartjs-node-canvas "等库，这些库为 Node.js 环境提供了画布实现。这样，开发人员就可以使用 Chart.js API 创建图表，并将其直接呈现在画布元素上，然后将其导出为图像或集成到应用程序的其他部分中。

注：要在 Node.js 中直接使用 Chart.js 生成服务器端图表，可将回调函数与 "chartjs-node-canvas "结合使用，这样就能动态创建图表，而无需依赖 CDN 或运行客户端脚本标记。

示例：使用 Chart.js Node.js 画布生成图表

const { ChartJSNodeCanvas } = require('chartjs-node-canvas');

// Create a new instance of ChartJSNodeCanvas providing width and height
const width = 800;
const height = 600;
const chartNode = new ChartJSNodeCanvas({ width, height });

// Define chart data
const dataset = {
  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'Sales',
      data: [65, 59, 80, 81, 56, 55, 40],
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      borderColor: 'rgba(75, 192, 192, 1)',
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
};

// Generate chart image
(async () => {
  const image = await chartNode.renderToBuffer(dataset);
  // Save or display the generated image
})();

const { ChartJSNodeCanvas } = require('chartjs-node-canvas');

// Create a new instance of ChartJSNodeCanvas providing width and height
const width = 800;
const height = 600;
const chartNode = new ChartJSNodeCanvas({ width, height });

// Define chart data
const dataset = {
  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'Sales',
      data: [65, 59, 80, 81, 56, 55, 40],
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      borderColor: 'rgba(75, 192, 192, 1)',
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
};

// Generate chart image
(async () => {
  const image = await chartNode.renderToBuffer(dataset);
  // Save or display the generated image
})();

JAVASCRIPT

在此代码示例中，我们创建了一个新的 ChartJSNodeCanvas 实例，并使用与典型 Chart.js 配置中相同的语法定义了图表数据。然后，我们使用 renderToBuffer 方法将图表图像生成一个缓冲区，该缓冲区可根据需要保存到磁盘或显示在应用程序中。

IronPDF for Node.js 简介

IronPDF 是一个功能强大的 Node.js 库，可让开发人员以编程方式创建、编辑和处理 PDF 文档。它为从 HTML 内容生成 PDF 提供了丰富的功能，包括支持 CSS 样式、图像和超链接。

Chart.js Node.js（如何为开发人员工作）：图 1 - IronPDF

开始

通过将 Chart.js Node.js 与 IronPDF 相结合，开发人员可以将动态图表无缝集成到他们的 PDF 报告和文档中，从而可以创建全面且具有视觉吸引力的文档，以简洁明了的方式传达复杂的数据。

要开始在 Node.js 项目中使用 IronPDF 和 chartjs-node-canvas ，请使用以下命令进行安装：

npm i chartjs-node-canvas
npm i @ironsoftware/ironpdf

使用 IronPDF 增强功能

服务器端的动态图表生成功能强大，而将这些图表嵌入 PDF 报告的功能则可增强其实用性。IronPDF 是一个适用于 Node.js 的强大库，可与 Chart.js 生成的图表图像无缝集成，使开发人员能够创建全面且具有视觉吸引力的 PDF 报告，并丰富其动态数据可视化内容。

import { PdfDocument } from "@ironsoftware/ironpdf";
import fs from "fs";

(async () => {
    // Generate HTML content with embedded chart image
    const htmlContent = `
        <html>
        <head>
            <title>Chart.js PDF Report</title>
        </head>
        <body>
            <h1>Monthly Sales Report</h1>
            <img src="data:image/png;base64,${image.toString('base64')}" />
        </body>
        </html>
    `;

    // Create a PDF from content
    const pdf = await PdfDocument.fromHtml(htmlContent);

    // Export the PDF to a file
    await pdf.saveAs("sales_report.pdf");
    console.log('PDF report generated successfully!');
})();

import { PdfDocument } from "@ironsoftware/ironpdf";
import fs from "fs";

(async () => {
    // Generate HTML content with embedded chart image
    const htmlContent = `
        <html>
        <head>
            <title>Chart.js PDF Report</title>
        </head>
        <body>
            <h1>Monthly Sales Report</h1>
            <img src="data:image/png;base64,${image.toString('base64')}" />
        </body>
        </html>
    `;

    // Create a PDF from content
    const pdf = await PdfDocument.fromHtml(htmlContent);

    // Export the PDF to a file
    await pdf.saveAs("sales_report.pdf");
    console.log('PDF report generated successfully!');
})();

JAVASCRIPT

在本例中，我们创建了一个 HTML 页面，其中包含以 base64 编码的 PNG 嵌入的图表图像。然后，IronPDF 将其转换为将 HTML 内容添加到 PDF 文档中这样就能有效地将动态图表封装在静态 PDF 报告中。这种无缝集成使开发人员能够将动态图表生成的强大功能与 PDF 文档的多功能性结合起来，从而创建信息丰富、视觉效果极佳的报告。

结论

Chart.js 是一款功能强大的工具，可用于在 Node.js 应用程序中创建动态且具有视觉吸引力的图表和图形。无论您是要构建网络应用程序、生成报告，还是要对数据进行可视化分析，Chart.js 都能为您提供所需的灵活性和功能，让您的数据栩栩如生。通过将 Chart.js 的功能与 Node.js 结合使用，开发人员可以创建身临其境的数据可视化，从而增强理解力，提高洞察力，并提升各种应用程序的用户体验。

IronPDF 提供即用型代码示例以及如何开始的完整指南。请访问文献资料页面了解更多详情。

IronPDF 可满足您的商业需求，为您提供免费试用起价 749 美元。它有退款保证，是加强文档管理的安全之选。不要等待，下载 IronPDF 现在就体验轻松集成 PDF!

< 前一页
Axios NPM（它是如何为开发人员工作的）

下一步 >
Jaeger Node.js（它如何为开发人员工作）