Comment dessiner des graphiques à l'aide de la toile JavaScript et HTML5

Ce tutoriel montre la création de graphiques à tarte et beignets à l'aide de JavaScript et du toile HTML5.

Nous couvrirons les principes fondamentaux des graphiques de tarte et de beignets, puis construire le javascript et le HTML pour les rendre.

Comprendre les graphiques de tarte et de beignets

Un graphique circulaire représente visuellement les données numériques en tant que tranches de taille proportionnelle dans un cercle. Chaque tranche correspond à une catégorie de données. Un graphique de beignets est une variation; C'est un graphique à tarte avec un trou au centre, ressemblant à un beignet.

Débutant: Configuration du projet

1. Créer un dossier de projet (par exemple, "Piechart-tutorial").
2. à l'intérieur, créez un fichier html (index.html) et un fichier javascript (script.js).

Le fichier index.html ne contiendra initialement qu'un élément de toile:

<canvas id="myCanvas"></canvas>

Dessin Fondamentaux: lignes, arcs et formes remplies

Avant de créer le graphique, couvrons les bases: lignes de dessin, arcs (parties des cercles) et formes remplies à l'aide de la toile. Nous allons définir les fonctions JavaScript pour chacun:

function drawLine(ctx, x1, y1, x2, y2, color) {
    ctx.beginPath();
    ctx.strokeStyle = color;
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();
}

function drawArc(ctx, x, y, radius, startAngle, endAngle, color) {
    ctx.beginPath();
    ctx.strokeStyle = color;
    ctx.arc(x, y, radius, startAngle, endAngle);
    ctx.stroke();
}

function drawPieSlice(ctx, centerX, centerY, radius, startAngle, endAngle, fillColor, strokeColor) {
    ctx.save();
    ctx.fillStyle = fillColor;
    ctx.strokeStyle = strokeColor;
    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    ctx.arc(centerX, centerY, radius, startAngle, endAngle);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.restore();
}

Ces fonctions seront appelées plus tard dans notre fichier script.js, ainsi que la récupération de contexte de toile:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

drawLine(ctx, 200, 200, 300, 300, "#000");
drawArc(ctx, 250, 250, 150, 0, Math.PI/3, "#000");
drawPieSlice(ctx, 250, 250, 150, Math.PI/2, Math.PI/2 + Math.PI/3, "#F00", "#000");

Cela rendra les formes de base sur la toile. (Remarque: un exemple complet et exécutable nécessiterait un fichier HTML plus entièrement étoffé et CSS pour le dimensionnement et le positionnement appropriés.)

Construire le graphique à tarte

Un graphique PIE a besoin d'un modèle de données (les données numériques) et d'une représentation visuelle. Nous représenterons les données comme un objet JavaScript:

const pieChartData = {
    "Classical Music": 16,
    "Alternative Rock": 12,
    "Pop": 18,
    "Jazz": 32
};

Le code JavaScript complet pour dessiner le graphique (y compris une structure de classe pour une meilleure organisation et une meilleure gestion des options) est assez étendu et au-delà de la portée d'une réponse concise. Cependant, la logique centrale implique d'itréger le pieChartData, de calculer l'angle pour chaque tranche en fonction de sa proportion du total et d'utiliser la fonction drawPieSlice pour rendre chaque tranche. Une légende et un titre seraient également ajoutés pour plus de clarté. (Reportez-vous à l'exemple d'origine pour l'implémentation complète.)

Le résultat final sera un graphique à secteurs affichant les données fournies, avec des étiquettes et une légende. N'oubliez pas d'ajuster la taille et le style de la toile au besoin dans votre CSS. L'exemple d'origine fournit un lien de codepen vers un exemple entièrement fonctionnel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!