跳至頁尾內容
  1. IronPDF for Node.js
  2. IronPDF for Node.js部落格
  3. Node幫助
  4. Chartjs Node.js
NODE 說明

Chartjs Node.js（開發者的使用方法）

Darrius Serrant
Darrius Serrant
已更新:

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

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

什麼是Chart.js？

Chart.js 是一個開源的JavaScript程式庫，允許開發人員為網頁應用程式建立互動且響應式的圖表和圖形。 Chart.js由Nick Downie開發，因其易用性、靈活性以及為每種圖表型別提供的廣泛自定義選項而廣受歡迎。 使用Chart.js，開發人員能夠快速建立多種圖表，包括折線圖、柱狀圖、餅圖、雷達圖等，適合多種可視化需求。

Chart.js的主要功能

  1. 易於使用： Chart.js設計為初學者友好，簡單且直觀的API使得在JavaScript中建立圖表變得非常簡單。
  2. 響應式設計： 使用Chart.js建立的圖表能自動適應不同大小的螢幕和裝置，確保跨平台一致的觀賞體驗。
  3. 自定義： Chart.js提供大量選項來自定義圖表的外觀和行為，包括顏色、字體、工具提示、動畫等。
  4. 互動性： 使用Chart.js生成的圖表預設是互動的，使用者可以懸停在資料點上查看更多資訊並動態與圖表交互。
  5. 插件系統： Chart.js具有強大的插件系統，使得開發者可以根據需要擴展其功能，新增新的圖表型別、動畫和特徵。

在Node.js中使用Chart.js

雖然Chart.js主要是為了在網頁瀏覽器中進行客戶端使用而設計的，但它也可以與Node.js應用整合，在伺服器端動態生成圖表。這為在各種基於Node.js的專案中使用Chart.js打開了許多可能性，例如生成PDF報告、為儀表板建立資料可視化或生成用於社交媒體分享的PNG格式圖像。

要在Node.js中使用Chart.js，開發者可以利用如chartjs-node-canvas之類的程式庫，提供Node.js環境的畫布實現。 這允許開發人員使用Chart.js的API建立圖表，直接渲染到畫布元素上，然後可將其導出為圖像或整合到應用的其他部分中。

注意：在Node.js中直接使用Chart.js進行伺服器端圖表生成，可以聯合使用回調函式與chartjs-node-canvas，從而動態建立圖表而不依賴CDN或客戶端腳本標籤。

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

// Import the ChartJSNodeCanvas module
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 with the type and the datasets
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
      }
    }
  }
};

// Asynchronously generate the chart image
(async () => {
  const image = await chartNode.renderToBuffer(dataset);
  // The chart image is now a buffer that can be saved or manipulated
})();
// Import the ChartJSNodeCanvas module
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 with the type and the datasets
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
      }
    }
  }
};

// Asynchronously generate the chart image
(async () => {
  const image = await chartNode.renderToBuffer(dataset);
  // The chart image is now a buffer that can be saved or manipulated
})();
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
npm i chartjs-node-canvas
npm i @ironsoftware/ironpdf
SHELL

利用IronPDF增強功能

雖然在伺服器端生成動態圖表非常強大，但能將這些圖表嵌入到PDF報告中更增強了它們的效用。 IronPDF，一個適用於Node.js的強大程式庫，與Chart.js生成的圖表圖像無縫整合，讓開發人員能夠建立出豐富且引人入勝的PDF報告，內含動態資料視覺化。

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

(async () => {
    // Generate HTML content with the chart image embedded as a base64 string
    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 the HTML 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 the chart image embedded as a base64 string
    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 the HTML 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提供了適用於Node.js的程式碼範例和完整的入門指南。 請存取此詳細文件以了解更多詳情。

IronPDF在此滿足您的商業需求，提供一個免費試用優惠，從$999開始。 提供退款保證，這是增強您的文件管理的安全選擇。 不要再等，現在下載IronPDF from npm，體驗輕鬆的PDF整合！

Darrius Serrant
Darrius Serrant
  立即與工程團隊聊天
全端軟體工程師（WebOps）

Darrius Serrant擁有邁阿密大學的電腦科學學士學位，並在Iron Software擔任全端WebOps行銷工程師。從小就對程式設計有興趣，他認為計算既神秘又易於理解，成為創意和問題解決的完美媒介。

在Iron Software，Darrius喜歡創造新事物並簡化複雜的概念，使其更易於理解。作為我們的常駐開發人員之一，他還志願教學，將他的專業知識傳授給下一代。

對Darrius來說，他的工作是有意義的，因為它有價值且對社會有真正的影響。

相關文章

30天試用→完整產品。無限制。無需信用卡。 開始免費試用

Iron 支援團隊

我們線上24小時，每週5天。
聊天
電子郵件
給我打電話