How to Draw Charts Using JavaScript and HTML5 Canvas

This tutorial demonstrates creating pie and doughnut charts using JavaScript and the HTML5 canvas.

We'll cover the fundamentals of pie and doughnut charts, then build the JavaScript and HTML to render them.

Understanding Pie and Doughnut Charts

A pie chart visually represents numerical data as proportionally sized slices within a circle. Each slice corresponds to a data category. A doughnut chart is a variation; it's a pie chart with a hole in the center, resembling a doughnut.

Getting Started: Setting Up the Project

1. Create a project folder (e.g., "piechart-tutorial").
2. Inside, create an HTML file (index.html) and a JavaScript file (script.js).

The index.html file will initially contain only a canvas element:

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

Drawing Fundamentals: Lines, Arcs, and Filled Shapes

Before creating the chart, let's cover the basics: drawing lines, arcs (parts of circles), and filled shapes using the canvas. We'll define JavaScript functions for each:

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

These functions will be called later within our script.js file, along with the canvas context retrieval:

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");

This will render basic shapes on the canvas. (Note: A complete, runnable example would require a more fully fleshed-out HTML file and CSS for proper sizing and positioning.)

Building the Pie Chart

A pie chart needs a data model (the numerical data) and a visual representation. We'll represent the data as a JavaScript object:

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

The complete JavaScript code to draw the chart (including a class structure for better organization and handling of options) is quite extensive and beyond the scope of a concise response. However, the core logic involves iterating through the pieChartData, calculating the angle for each slice based on its proportion to the total, and using the drawPieSlice function to render each slice. A legend and title would also be added for clarity. (Refer to the original example for the full implementation.)

The final result will be a pie chart displaying the provided data, complete with labels and a legend. Remember to adjust canvas size and styling as needed in your CSS. The original example provides a CodePen link to a fully functional example.

The above is the detailed content of How to Draw Charts Using JavaScript and HTML5 Canvas. For more information, please follow other related articles on the PHP Chinese website!