【HTML&CSS】Chart.jsを使ってグラフを3分で実装する方法

f:id:himanakuroneko7:20200709000015p:plain

こんにちはHTML&CSS初心者のhimakuroです

今回の記事ではChart.jsというライブラリを活用してポートフォリオにグラフを実装していきます。

前回の記事

前回はSwiper.jsというライブラリを活用してスライダーを実装しました。

もし興味があればこちらの記事も参考にしてみてください。

kuro-engineer-log.hatenablog.com

今回作るもの

今回はこんな感じのグラフを作っていきます。

f:id:himanakuroneko7:20200708202404p:plain

Chart.jsとは

f:id:himanakuroneko7:20200708202647p:plain

Chart.jsとはJavaScriptを活用して簡単にグラフが作成出来るオープンソースのライブラリです。

複数の種類のグラフを1つの図にまとめたり、アニメーションを入れたりと、幅広いデザインを取り入れることが出来るのが特徴です。

Chart.jsの導入方法

Chart.jsの導入方法としてはダウンロードしてプロジェクトのフォルダに格納する方法と、CDNで配信されている物を使う2通りがあります。

今回はお手軽なCDNで配信されているものを利用する方針にします。

index.html

<html>
  <head></head>
  <body>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
</html>

</body> の下にchart.jsのライブラリを読み込む1行を追加すれば導入完了です。

グラフを描画してみる

続いてグラフを描画するためのコードを記述していきます。

index.html

<html>
  <head></head>
  <body>
    <div class="chart">
      <canvas id="sampleChart"></canvas>
    </div>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
  <script>
    let ctx = document.getElementById("sampleChart").getContext('2d');
    let sampleChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['7月1日', '7月2日', '7月3日', '7月4日', '7月5日', '7月6日', '7月7日'],
            datasets: [
                {
                    label: 'Analytics',
                    data: [1, 3 ,4, 8, 10, 2, 0],
                    borderColor: "rgba(18, 177, 192, 1)",
                    backgroundColor: "rgba(168, 229, 255, 0.5)"
                },
            ]
        }
    });
  </script>
</html>

id=sampleChart のところにグラフを描画させる
type: 'line' で線グラフを指定
data はどこにデータをプロットするかを指定
borderColor と backgroundColor で色を指定

上記のコードを追加後は下記のようなグラフが画面に表示されます。

f:id:himanakuroneko7:20200708234813p:plain

グラフの見た目は調整

グラフが描画できたので少し見た目を調整していきます。

index.html

<script>
  let ctx = document.getElementById("sampleChart").getContext('2d');
  ctx.canvas.height = 80; // 追加
  let sampleChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['7月1日', '7月2日', '7月3日', '7月4日', '7月5日', '7月6日', '7月7日'],
        datasets: [
            {
                label: 'Analytics',
                lineTension: 0, // 追加
                data: [1, 3 ,4, 8, 10, 2, 0],
                borderColor: "rgba(18, 177, 192, 1)",
                backgroundColor: "rgba(168, 229, 255, 0.5)"
            },
        ]
    }
});

height を任意の値に変更
lineTension: 0 にすることで、丸みを帯びた線から、より角張ったものに変更

height変更後はグラフがいい感じの高さになると思うので、あとは色を任意のものに変更したり、データ数を増やせばグラフの完成です。

f:id:himanakuroneko7:20200708234746p:plain