chart.jsを使ってグラフを使ったWebサイトを作ってみる！

こんにちは！keitaです♪

今回は、「chart.js」というjavascriptの機能を使ってみたいと思います。

「chart.js」はWeb上にグラフを作成してくれる機能です。
データ情報を載せるサイトなんかですととても重宝されている機能なのではないでしょうか。。

では始めていきます！

作るもの

簡単に「chart.js」を使ったWebサイトを作っていきます！
下記の様にしておきます。

ーーーーーーーーーーーーーーーーー

【サイトタイトル】keita analysis
【内容】
グラフを４つ表示
　→曜日ごとのテンション
　　→棒グラフ
　→月ごとのテンション
　　→折れ線グラフ
　→一日の平均スケジュール
　　→円グラフ
　→診断情報（無料診断サイトの診断結果）
　　→レーダーチャート
【ページ数】1ページ
【使用ツール】
エディター：VScode

ーーーーーーーーーーーーーーーーー

こんなところでしょうか。

では作成していきましょう。

事前準備

下記のコードをHTMLのBody内に記載しておく必要があります！
書いておきましょう

ーーーーーーーーーーーーーーーーー
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

ーーーーーーーーーーーーーーーーー

これで「chart.js」を使うことができる環境を作ることができました。
では、自分のサイトを構築していきます。

作成していこう

では、作成していきます！
ただ、コードが結構長くなってしまうため、必要最低限のもののみを記載という形にさせてもらいます！興味のある方は、最後にコードのURLを貼るので参照してみてください！！

HTMLのBody内に自分で作成していくjavascriptファイルの読み込みとグラフを表示させる定義を行います。

ーーーーーーーーーーーーーーーーー
<div class="bar">
　<canvas id="bar" width="100px" height="100px"></canvas>
</div>

グラフのjavascript処理を書いていきます。

下記は棒グラフを参考に書いていきますが、これのtype等の値を書き換えるだけでグラフの種類を変えたり、編集できるので調整してみてください！
詳しくは公式サイトで～

私はこんな感じで作成しました！！

ーーーーーーーーーーーーーーーーー

//HTML側の要素を取得する
const bar = document.getElementById('bar').getContext('2d');

//グラフ
const barchart = new Chart(bar, {
　　type: 'bar',
　　data: {
　　　labels: ['Monday','Tuesday','Wendnesday',
　　　　　　　　'Thursday','Friday','Saturday','Sunday'],
　　　datasets: [{
　　　　　　label: "値",
　　　　　　data: [1, 3, 7, 5, 9, 10,4],
　　　　　　backgroundColor: [
　　　　　　　　'rgba(255, 206, 86, 0.2)',
　　　　　　],
　　　　　　borderColor: [
　　　　　　　　'rgba(255, 206, 86, 1)',
　　　　　　],
　　　　　　borderWidth: 1
　　　}]
    },　　
　　options: {
　　　scales: {
　　　　y: {
　　　　　　beginAtZero: true
　　　　}
　　　},
　　　plugins: {
　　　　title: {
　　　　　　display: true,
　　　　　　position:'top',
　　　　　　text: '曜日ごとテンションゲージ' 
　　　　},
　　　}
    }
});