JavaScriptを使用した円グラフ(ドーナツチャート)の作り方

JavaScript
2023.08.15

円グラフ（ドーナツチャート）をJavaScriptとHTMLのCanvasタグを使用して作成する方法を初心者向けにご紹介していきます。

本記事では基礎的なHTML、Javascript、CSSの知識を理解している前提で解説しておりますが、随時、補足記事なども追加する予定です。

とりあえず円グラフ(ドーナツチャート)だけ使用したいという方はコピペでも簡単にカスタマイズできるようにしてありますので是非ご利用ください

作成する円グラフ

今回作成する円グラフのサンプルは以下のようになります。

青75％、赤25％の円グラフです。色や％は後述する方法にて自由に変更できます。

また、グラフを以下のように3色構成にすることも可能です。

色の数は自由に増減させることができます。用途に応じて利用することができますので

ぜひご利用いただければと思います。

円グラフの作り方とファイル構成

解説は後回しにしてファイル構成、各種ファイルのコードを紹介していきます。

とにもかくにも画面に表示させるところから始めていきましょう。

準備するファイル
  • index.html →　　　作成したグラフの描画に使用
  • script.js →　　　グラフの生成、デザインに使用

ファイル名はサンプルとして上記を使用していきますが、任意のファイル名に変更したい場合はお好きに変更しても問題はありません。

コピペする場合は各ファイルの読込み時のファイル名の指定のみご注意ください。

コピペでOK！円グラフ(ドーナツチャート)

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
  </head>
  <body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
  </body>
  <script src="./script.js"></script>
</html>

script.js

// キャンバス要素とコンテキストを取得
let canvas = document.getElementById('myCanvas');
let context = canvas.getContext('2d');

// ドーナツグラフの中心座標と半径を設定
let centerX = canvas.width / 2;
let centerY = canvas.height / 2;
let outerRadius = 150;
let innerRadius = 100;

// 各セクションの角度と色を定義
let sections = [
    { percentage: 25, color: 'red' },
    { percentage: 75, color: 'blue' },
];

let startAngle = 0;
let endAngle = 0;

// 各セクションを描画
sections.forEach(function(section) {
    endAngle = startAngle + (section.percentage / 100) * (Math.PI * 2);
    
    context.beginPath();
    context.moveTo(centerX, centerY);
    context.arc(centerX, centerY, outerRadius, startAngle, endAngle);
    context.closePath();
    
    context.fillStyle = section.color;
    context.fill();
    
    startAngle = endAngle;
});

// 内側をくり抜いて、ドーナツグラフの空白部分を描画
context.beginPath();
context.arc(centerX, centerY, innerRadius, 0, Math.PI * 2);
context.closePath();
context.fillStyle = 'white';  // 内側の色を設定
context.fill();

とりあえずですが、上記をコピー＆ペーストするだけでもグラフを作成することは可能なはずです。

ざっくりとした内容はコード内にコメントを残しているのでそちらもご覧ください。

カスタマイズ用コード解説

次に簡単にグラフをカスタムする方法を紹介していきます。

グラフをカスタムするにはJavascript（script.js）を使用していきます。

初めての方は実際に自身の環境で操作しながら学習をしていきましょう

HTMLファイル(index.html)解説

htmlのCanvasタグを使用するには以下の記述をする必要があります。

<canvas id="myCanvas" width="400" height="400"></canvas>

Jacascriptでグラフを生成して表示させるためid(myCanvas)を付与しておきます。

また、グラフの表示領域としてwidth(横幅)を400px、height(縦幅)を400pxずつ確保します。

HTMLでの設定としては以上になります。

ほかの記述内容は、HTMLとしての定型文と、各種必要ファイルの読込です。

前述していますが、今回準備した他ファイル(script.js,style.css)を読み込んでいるのはHTMLファイルになります。

ファイル名を変更している場合は各々変更したファイル名を指定するように注意してください。

Javascriptファイル(script.js)解説

こちらが最も重要になります。実際にグラフを作成しているJavascriptの記述について分解して解説していきます。

キャンバス要素とコンテキストを取得

// キャンバス要素とコンテキストを取得
let canvas = document.getElementById('myCanvas');
let context = canvas.getContext('2d');

この部分では、HTML内のmyCanvasというIDを持つCanvasタグを取得し、その2Dコンテキストを取得しています。

2Dコンテキストとは

canvasタグに描画される各種設定値の現在の状態を保持しているもの(オブジェクト)になります。例えば、色やグラフ幅を変更していれば変更した値を表示するという設定を管理してくれるのがコンテキストです。

ドーナツグラフの中心座標と半径を設定

// ドーナツグラフの中心座標と半径を設定
let centerX = canvas.width / 2;
let centerY = canvas.height / 2;
let outerRadius = 150;
let innerRadius = 100;

centerXとcenterYはキャンバスの中心座標を取得するために、HTMLファイルでCanvasタグに設定したwidth(横幅)、height(縦幅)を2で割ってその値を保持しています。

outerRadiusとinnerRadiusは外側の半径と内側の半径を定義しています。これらの値を操作すること円グラフの幅を調整することができます。

各セクションの数,角度,色を定義

// 各セクションの角度と色を定義
let sections = [
    { percentage: 25, color: 'red' },
    { percentage: 75, color: 'blue' },
];

sections配列には、ドーナツグラフの各セクションの情報を設定しています。各セクションはpercentageとcolorの2つのプロパティを持っており、percentageはそのセクションの割合をパーセントで指定することができ、colorはそのセクションの色を指定できます。

これらの値を操作することでそれぞれの色や割合を自由に変更できます。

また、円グラフにセクションを追加したい場合は”{ percentage: 任意, color: ‘任意’ }”を追加することで好きな数のセクションを実現することができます

各セクションの開始角度を定義

let startAngle = 0;
let endAngle = 0;

startAngleとendAngleは、各セクションの開始角度と終了角度を保持するための変数として定義しています。初期値として0を指定しています。

後続の処理でstartAngleからendAngleを算出して代入します。

セクションごとに円グラフの描画

// 各セクションを描画
sections.forEach(function(section) {
    endAngle = startAngle + (section.percentage / 100) * (Math.PI * 2);
    
    context.beginPath();
    context.moveTo(centerX, centerY);
    context.arc(centerX, centerY, outerRadius, startAngle, endAngle);
    context.closePath();
    
    context.fillStyle = section.color;
    context.fill();
    
    startAngle = endAngle;
});

forEachでループを使用して、各セクションを描画していきます。endAngleを計算して、arcメソッドを使用してセクションの弧を描画し、fillStyleをセクションの色に設定して塗りつぶしていきます。startAngleを更新して次のセクションの描画を行います。

これをsections配列に指定した値の数だけ繰り返すことですべてのセクションを描画して円グラフを作成していきます。

円グラフをドーナツ状に変更

// 内側をくり抜いて、ドーナツグラフの空白部分を描画
context.beginPath();
context.arc(centerX, centerY, innerRadius, 0, Math.PI * 2);
context.closePath();
context.fillStyle = 'white';  // 内側の色を設定(グラフを配置する背景色に合わせて変更)
context.fill();

最後に、内側をくり抜いてドーナツグラフの空白部分を描画していきます。arcメソッドによって内側に小さな円を描画し、fillStyleを白に設定して塗りつぶしています。これにより、ドーナツチャート(円グラフ)が完成です。

今回は背景色を白と仮定しているのでfillStyleには白を設定していますが、こちらは実際にグラフを配置する背景の色に合わせて変更しましょう。

タイトルとURLをコピーしました