Cara melukis carta menggunakan kanvas javascript dan html5

Tutorial ini menunjukkan mencipta carta pai dan donat menggunakan JavaScript dan kanvas HTML5.

Kami akan meliputi asas -asas carta pai dan donat, kemudian membina JavaScript dan HTML untuk menjadikannya.

Memahami carta pai dan donat

carta pai secara visual mewakili data berangka sebagai kepingan bersaiz proporsional dalam bulatan. Setiap kepingan sepadan dengan kategori data. Carta donat adalah variasi; Ini carta pai dengan lubang di tengah, menyerupai donat.

Bermula: Menyediakan projek

Buat folder projek (mis., "Piechart-Tutorial").
di dalam, buat fail html () dan fail javascript (). index.html script.js fail

pada mulanya hanya mengandungi elemen kanvas:

index.html

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

Lukisan Asas: garis, arka, dan bentuk yang diisi

Sebelum membuat carta, mari kita tutup asas -asas: garis lukisan, arka (bahagian bulatan), dan bentuk yang diisi menggunakan kanvas. Kami akan menentukan fungsi JavaScript untuk setiap:

Fungsi -fungsi ini akan dipanggil kemudian dalam fail

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

kami, bersama -sama dengan pengambilan konteks kanvas:

script.js

Ini akan menjadikan bentuk asas pada kanvas. (Nota: Contoh yang lengkap dan runnable memerlukan fail HTML dan CSS yang lebih fleshed keluar sepenuhnya untuk saiz dan kedudukan yang betul.)

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

Membina carta pai

Carta pai memerlukan model data (data berangka) dan perwakilan visual. Kami akan mewakili data sebagai objek JavaScript:

Kod JavaScript lengkap untuk menarik carta (termasuk struktur kelas untuk organisasi yang lebih baik dan pengendalian pilihan) agak luas dan melampaui skop respons ringkas. Walau bagaimanapun, logik teras melibatkan lelaran melalui

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

, mengira sudut untuk setiap kepingan berdasarkan perkadarannya dengan jumlah, dan menggunakan fungsi

untuk menjadikan setiap kepingan. Legenda dan tajuk juga akan ditambah untuk kejelasan. (Rujuk contoh asal untuk pelaksanaan penuh.) pieChartData drawPieSlice Hasil akhir akan menjadi carta pai yang memaparkan data yang disediakan, lengkap dengan label dan legenda. Ingatlah untuk menyesuaikan saiz kanvas dan gaya seperti yang diperlukan dalam CSS anda. Contoh asal menyediakan pautan codepen ke contoh berfungsi sepenuhnya.

Atas ialah kandungan terperinci Cara melukis carta menggunakan kanvas javascript dan html5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!