如何使用JavaScript和HTML5畫布繪製圖表

本教程演示了使用JavaScript和HTML5畫布創建PIE和DONUT圖表。

我們將介紹PIE和DONUT圖表的基本原理，然後構建JavaScript和HTML以渲染它們。

了解派和甜甜圈圖

>

餅圖在視覺上表示數值數據是圓圈內的尺寸切片。 每個切片對應於數據類別。甜甜圈圖是一個變化。這是一個餅圖，中間有一個孔，類似於甜甜圈。

>

入門：設置項目>

創建一個項目文件夾（例如，“ Piechart-Tutorial”）。
1. >
內部，創建一個HTML文件（
2. ）和一個JavaScript文件（index.html）。 script.js

最初僅包含一個帆布元素：>

index.html

繪製基礎知識：線條，弧和填充形狀

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

在創建圖表之前，讓我們覆蓋基礎知識：繪圖線，弧線（圓圈的部分）和使用畫布填充的形狀。 我們將為每個定義JavaScript函數：> 這些函數將在我們的

>文件中與畫布上下文檢索一起調用：

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

這將在畫布上呈現基本形狀。 （注意：一個完整​​的，可運行的示例將需要更充分的充實的HTML文件和CSS才能進行適當的尺寸和定位。）

script.js>

構建餅圖

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

餅圖需要一個數據模型（數值數據）和視覺表示。 我們將這些數據表示為JavaScript對象：>

>繪製圖表的完整JavaScript代碼（包括用於更好組織和處理選項的類結構）非常廣泛，並且超出了簡潔響應的範圍。 但是，核心邏輯涉及通過進行迭代，根據每個切片的比例計算每個切片的角度，並使用>函數來呈現每個切片。 為了清楚起見，還將添加傳奇和標題。 （請參閱完整實施的原始示例。）>

最終結果將是顯示提供的數據的餅圖，並帶有標籤和傳奇。請記住，在CSS中根據需要調整帆布尺寸和样式。 原始示例提供了一個codepen鏈接指向一個功能齊全的示例。

>

以上是如何使用JavaScript和HTML5畫布繪製圖表的詳細內容。更多資訊請關注PHP中文網其他相關文章！