こんにちは！今回は、JavaScriptライブラリである「Chart.js」を紹介します！
また、実際にレーダーチャートを出力できるようにオリジナルサンプルコードを用いて解説していきたいと思います！初心者の方もすぐできるようにHTMLファイルにまとめています！
Chart.jsを使用する利点は、 公式ドキュメントにあるコードを元に様々な種類のグラフがweb上で出力可能です！グラフがあるだけで、サイトの説得力やデザイン性の向上が期待できますよ！
作成できるグラフ
今回は、レーダーチャートを簡易的に表示してみましょう！
完成系はこちら
今回使用するコードはこちらです！
まずは、コードをコピーしてグラフを表示させてみましょう！
See the Pen レーダーチャート by アヤカ (@ayaka2019436) on CodePen.
解説開始！
まず、Chart.jsを使用できるようにする
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js">
</script> CDNを利用してChart.jsの外部スクリプトを呼び出しましょう。
上記のように、CDNを使用することでウェブページ上で外部スクリプトを簡単に読み込むことができます。
HTMLの中でグラフを呼び出す
<canvas id="myRaderChart"></canvas>
idにmyRaderChartと付けた、canvasタグでグラフを表示します。
グラフのデータ部分の設定
type: "radar",
data: {
labels: [
"ノーマル",
"三種のチーズ",
"ねぎ玉",
"おろしポン酢",
"キムチ",
],type:'radar' グラフのタイプを宣言します。今回はレーダーチャートなので"radar"を指定labels: ["ノーマル", "三種のチーズ", "ねぎ玉", "おろしポン酢", "キムチ"], データラベルの追加
グラフのデータセットの追加
datasets: [
{
label: "すいちゃん",
data: [7, 8, 10, 9, 4],
backgroundColor: "RGBA(240,144,141, 0.5)",
borderColor: "RGBA(238,130,124, 1)",
borderWidth: 1,
pointBackgroundColor: "RGB(240,145,153)",
},
{
label: "幻の牛丼マスター",
data: [10, 5, 8, 10, 6],
backgroundColor: "RGBA(44,169,225, 0.5)",
borderColor: "RGBA(56,161,219, 1)",
borderWidth: 1,
pointBackgroundColor: "RGB(46,106,177)",
},
],label: 'すいちゃん', データの凡例data: [7, 8, 10, 9, 4], データの値(データラベルに対応するように順番を気をつける)backgroundColor: "RGBA(240,144,141, 0.5)", 対応するデータセットのグラフの背景色の指定borderColor: "RGBA(238,130,124, 1)", グラフの線の色の指定borderWidth: 1, グラフの線の太さpointBackgroundColor: "RGB(240,145,153)", グラフのポイントマークの色指定
これらをセットすることでグラフの中身を設定することができます
また、すいちゃんデータセットと幻の牛丼マスターデータセットのように、複数指定することでデータセットを増やすことも可能です！
グラフの見た目上の設定
options: {
title: {
display: true,
text: '牛丼とトッピングの満足度'
},
scale:{
ticks:{
suggestedMin: 0,
suggestedMax: 10,
stepSize: 10,
callback: function(value, index, values){
return value + '点'
}
}
} optionsの中ではdisplay: true, タイトルラベルを表示させるかtext: '牛丼とトッピングの満足度' グラフのタイトルテキストscaleの中では、suggestedMin: 0, 表示するデータの最小値suggestedMax: 10, 表示するデータの最大値stepSize: 10, データ間の数値の設定
を設定することができます！
まとめ
コードの文を理解できるようになってきたら、自分が作ってみたいと思うグラフを試行錯誤しながら
作成してみてくださいね！では、良きコーディングライフを！！
今後、ドキュメントの読み方やドキュメントの探し方などの記事も作成予定ですので、楽しみにしていてください！