こんにちは、ユアサです。
先日、canvasとJSを使ってレーダーチャートを作成していく記事の準備編を公開していましたが、今回より実践編となります。
前回の記事はこちら↓
レーダーチャートのベースとなる枠線を作成しよう
今回はまずレーダーチャートのベース部分である枠線の描画をしていきます。前回では五角形の描画をしてみましたが、レーダーチャートで実用できるよう正五角形の形にします。
作成されたもののポイントとなる部分を説明していきます。
See the Pen radar chart by felly (@felly00505) on CodePen.
用意されている関数drawPolygonは正多角形を描画する際に汎用できるものですが、今回は正五角形なのでそれに対応した引数を最後に記述しました。
まず与えられた数値以下の最大の整数を返すMath.floor()関数で図形の外周360度を頂点の数で割り、描画スタート位置から頂点一つあたりの角度を求めます。（今回の場合は360 / 5で72度になります。）
描画のスタート位置はデフォルトで3時方向からとなっているため、12時方向からのスタートにするために角度調整をします。
const p = Math.floor(360 / n) // n：頂点の数 let theta = -90; // 角度修正（キャンバスでは3時方向が0度扱いのため12時方向を0度とする）
次に各頂点の存在する角度（座標）を求めます。それぞれの頂点の座標をいきなり求めるというより直角三角形の頂点と見立てて計算していくので、Math.cos()関数及びMath.sin()関数を使用して求めます。
また上記では特に記述していませんでしたが、ソースコード内では事前に用意していた配列polygonに算出された各頂点の位置をpolygon.push(pos);で追加しています。
while(theta<360-90){ // 全ての頂点を求める const pos = { // r：半径 // cx：中心x座標 // cy：中心y座標 x: r * Math.cos(theta*Math.PI/180) + cx, y: r * Math.sin(theta*Math.PI/180) + cy, }; polygon.push(pos); theta += p; // 次の点の位置 }
正五角形として描画するための各頂点の位置を求めたので、最後に描画をします。前回紹介しましたmoveTo();とlineTo();を使用して、頂点と頂点をラインで結びます。
// 多角形を描画する context.strokeStyle = color; context.lineWidth = lineWidth; context.beginPath(); for(let i=0; i<polygon.length; i++){ if(i==0){ context.moveTo(polygon[i].x, polygon[i].y); } else{ context.lineTo(polygon[i].x, polygon[i].y); } } context.closePath(); // パスを閉じる context.stroke();
これで描画するための関数drawPolygonが完成したので、引数を渡して正五角形の枠線を完成させます。
drawPolygon(5, 100, 110, 100, 5, "#91818C"); // (頂点の数、中心x座標、中心y座標、半径、枠線の太さ、色)
CodePenに記述されていたソースコードのポイント部分は以上となります。枠線自体は完成しましたが、レーダーチャートと言うからには目盛り線も欲しいところです。半径100pxということで、それぞれの目盛りの位置を中心位置から100px、80px、60px、40px、20pxの五段階くらいのものを想定して作成します。
半径が20pxずつ違う正五角形を5回描画していくというイメージで作成できるので、for文を追加します。
See the Pen radae chart_using by felly (@felly00505) on CodePen.
まとめ
今回はレーダーチャートの枠線の描画をして、そこに目盛り線も追加しました。五角形の想定で作成していますが、使用している関数drawPolygonは正多角形に汎用できるので、よかったら色々いじってみたいですね。
次回はいよいよレーダーチャートのデータを入力し、データに合わせたチャートが即時に描画される動作を追加していきます。
今回も最後まで読んでいただきありがとうございました（^人^）
