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年7月1日

在當今數據驅動的世界中，以視覺化方式呈現信息已成為有效溝通的基石。無論是分析商業趨勢、追蹤研究進展，還是簡單地理解複雜的數據集，創建引人注目的可視化圖表的能力都是無價的。Chart.js Node是一個強大且多功能的 JavaScript 庫，已成為開發人員輕鬆創建令人驚嘆的圖表和圖形的首選工具。

在本文中，我們將探討Node.js的Chart.js服務，並探討其功能、優勢以及如何利用它來充分發揮Node.js應用中的數據可視化潛力。

Chart.js 是什麼？

Chart.js 是一個開源的 JavaScript 圖表庫，允許開發人員為網頁應用程式創建互動且具有回應性的圖表和圖形。由 Nick Downie 開發，Chart.js 因其易於使用、靈活性及每種圖表類型的廣泛自定義選項而受到廣泛歡迎。通過 Chart.js，開發人員可以快速創建各種圖表，包括折線圖、條形圖、餡餅圖、雷達圖等，滿足各種可視化需求。

Chart.js 的主要功能

易於使用： Chart.js 設計為初學者友好，具有簡單直觀的 API，使得在 JavaScript 中創建圖表變得容易。
響應式設計： 用 Chart.js 創建的圖表會自動適應不同的屏幕尺寸和設備，確保在各平台上有一致的觀看體驗。
自訂化： Chart.js 提供了廣泛的選項來定制圖表的外觀和行為，包括顏色、字體、工具提示、動畫等。
互動性： 用 Chart.js 生成的圖表默認是互動的，允許用戶將游標懸停在數據點上以查看附加信息並動態地與圖表進行交互。
插件系統： Chart.js 擁有強大的插件系統，使得開發人員可以擴展其功能，並根據需要添加新的圖表類型、動畫和功能。

使用 Chart.js 和 Node.js

雖然 Chart.js 主要設計用於網頁瀏覽器的客戶端使用，但它也可以與 Node.js 應用程式整合，在伺服器端動態生成圖表。這為在各種基於 Node.js 的項目中使用 Chart.js 打開了廣泛的可能性，例如生成 PDF 報告、為儀表板創建數據可視化或生成 PNG 格式的圖片以便於社交媒體分享。

要使用 Chart.js與Node.js，開發者可以利用像 chartjs-node-canvas 這樣的庫，它為 Node.js 環境提供了一個 canvas 的實現。這允許開發者使用 Chart.js 的 API 來創建圖表並直接渲染到 canvas 元素，之後可以將其導出為圖像，或整合到應用程式的其他部分。

注意：在 Node.js 中直接使用 Chart.js 生成伺服器端圖表時，可以與 chartjs-node-canvas 搭配使用回調函數，從而在不依賴 CDN 或執行用戶端腳本標籤的情況下動態創建圖表。

範例：使用 Chart.js 和 Node.js Canvas 生成圖表

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 方法將圖表生成為 Buffer 格式的圖像，這可以根據需要保存到磁碟或顯示在應用程式中。

介紹 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 應用程式中創建動態且視覺吸引力強的圖表和圖形。無論您是在構建 Web 應用程式、生成報告，還是可視化分析數據，Chart.js 都提供了您所需的靈活性和功能，以使您的數據變得生動起來。通過將 Chart.js 的功能與 Node.js 結合使用，開發人員可以創建身臨其境的數據可視化效果，增強理解力、促進洞察力，並提升各種應用程式中的用戶體驗。

IronPDF 提供即用程式碼範例和完整的入門指南。請訪問此網站文檔請訪問頁面以獲取更多詳情。

IronPDF 在此滿足您的商業需求，提供免費試用起價 $749。有退款保證，它是增強您的文件管理的安全選擇。不要等待，立即下載 IronPDF 現在體驗輕鬆的 PDF 集成!

< 上一頁
Axios NPM（開發人員運作方式）

下一個 >
Jaeger Node.js（如何為開發人員運作）