JavaScriptとHTML5キャンバスを使用してチャートを描画する方法

このチュートリアルでは、JavaScriptとHTML5キャンバスを使用してパイとドーナツチャートの作成を示しています。

パイとドーナツのチャートの基礎をカバーし、JavaScriptとHTMLを構築してそれらをレンダリングします。

パイとドーナツのチャートを理解するパイチャートは、円の中の比例サイズのスライスとして数値データを視覚的に表します。 各スライスはデータカテゴリに対応します。ドーナツチャートはバリエーションです。中央に穴が開いたパイチャートで、ドーナツに似ています。

始めましょう：プロジェクトのセットアップ

プロジェクトフォルダー（ "piechart-tutorial"など）を作成します 内部の内部で、HTMLファイル（

）とjavaScriptファイル（）を作成します。

ファイルには、最初はキャンバス要素のみが含まれます：
2. index.html描画の基礎：線、アーク、および充填された形状script.js

チャートを作成する前に、基本をカバーしましょう。ライン、アーク（円の一部）、およびキャンバスを使用して形状を満たします。 それぞれのjavaScript関数を定義します：

index.html

これらの関数は、Canvasコンテキストの取得とともに、後で

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

ファイル内で呼び出されます。

これにより、キャンバスの基本的な形状が表示されます。 （注：完全で実行可能な例では、適切なサイジングとポジショニングのために、より完全に肉付けされたHTMLファイルとCSSが必要です。）

パイチャートを構築します

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

パイチャートには、データモデル（数値データ）と視覚的表現が必要です。 データをJavaScriptオブジェクトとして表します：

script.js

チャートを描画するための完全なJavaScriptコード（より良い組織とオプションの処理のためのクラス構造を含む）は、非常に広範であり、簡潔な応答の範囲を超えています。 ただし、コアロジックには、

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

を介して反復し、合計との比率に基づいて各スライスの角度を計算し、各スライスをレンダリングするために

関数を使用することが含まれます。 明確にするために、伝説とタイトルも追加されます。 （完全な実装については、元の例を参照してください。）

最終結果は、提供されたデータを表示するパイチャートで、ラベルと凡例を備えています。必要に応じて、CSSで必要に応じてキャンバスのサイズとスタイリングを調整することを忘れないでください。 元の例では、完全に機能する例へのCodepenリンクを提供します。

以上がJavaScriptとHTML5キャンバスを使用してチャートを描画する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。