Chartjs Node.js (Comment ça marche pour les développeurs)

Principales caractéristiques de Chart.js

1. Facilité d'utilisation : Chart.js est conçu pour être convivial pour les débutants, avec une API simple et intuitive qui facilite la création de graphiques en JavaScript.
2. Design réactif : Les graphiques créés avec Chart.js s'adaptent automatiquement à différentes tailles d'écran et appareils, garantissant une expérience de visualisation cohérente sur les plateformes.
3. Personnalisation : Chart.js offre des options étendues pour personnaliser l'apparence et le comportement des graphiques, notamment les couleurs, les polices, les infobulles, les animations et plus encore.
4. Interactivité : Les graphiques générés avec Chart.js sont interactifs par défaut, permettant aux utilisateurs de survoler les points de données pour afficher des informations supplémentaires et d'interagir dynamiquement avec le graphique.
5. Système de plugins : Chart.js dispose d'un système de plugins robuste qui permet aux développeurs d'étendre ses fonctionnalités et d'ajouter de nouveaux types de graphiques, animations et fonctionnalités selon les besoins.

Exemple : Générer un graphique avec 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
})();

Dans cet exemple de code, nous créons une nouvelle instance de ChartJSNodeCanvas et définissons les données du graphique en utilisant la même syntaxe qu'une configuration typique de Chart.js. Nous utilisons ensuite la méthode renderToBuffer pour générer l'image du graphique sous forme de Buffer, qui peut être enregistrée sur le disque ou affichée dans l'application selon les besoins.

Améliorer avec IronPDF

Bien que la génération de graphiques dynamiques côté serveur soit puissante, la possibilité d'intégrer ces graphiques dans des rapports PDF augmente leur utilité. IronPDF, une bibliothèque robuste pour Node.js, offre une intégration transparente avec les images de graphiques générés par Chart.js, permettant aux développeurs de créer des rapports PDF complets et visuellement attrayants enrichis de visualisations de données dynamiques.

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!');
})();

Dans cet exemple, nous créons une page HTML contenant l'image du graphique intégrée sous forme de PNG encodé en base64. IronPDF convertit ensuite ce contenu HTML en un document PDF, encapsulant efficacement le graphique dynamique dans un rapport PDF statique. Cette intégration transparente permet aux développeurs de combiner la puissance de la génération de graphiques dynamiques avec la polyvalence des documents PDF, permettant la création de rapports informatifs et visuellement engageants.