JavaScriptでグラフを作る時に使えるライブラリを現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでグラフを作る時に使えるライブラリについて解説しています。JavaScriptではライブラリを利用することで、よく使う機能を部品のように扱うことができます。ここではChart.jsというライブラリを使ったグラフ作成の例を紹介します。ぜひ参考にしてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでグラフを作る時に使えるライブラリについて、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

グラフを作る時に使えるライブラリについて詳しく説明していくね!

大石ゆかり

お願いします!

 

ライブラリとは

平たくいえば、部品のことです。多くの人が使うようなものはたいてい部品として用意されています。用意された部品を使うことで楽に素早くやりたいことを実現できます。

例えば、車のおもちゃを組み立てる際にモーターを1から作ったら大変ですが、すでに作られたモーターを使用すると楽に組み立てることができます。

今回はチャートの表示をしてくれるライブラリ(部品)を使ってみます。複雑なチャートがライブラリを使うことで簡単に処理できる様子を確認してみてください。

 

グラフ作成に使えるライブラリ

グラフを作成してくれるライブラリはたくさんあります。機能は少ないがシンプルなものや豊富なカスタマイズができるものなど用途に合わせて選んでください。

とはいえ、最もメジャーとも言えるChart.jsでグラフの種類や表示のカスタマイズまで多くの場合は足りるかと思います。

棒グラフや円グラフなど豊富なグラフの種類に加え、表示の色やアニメーションなども指定可能です。
また、英語のライブラリが多いなか、日本語ページがあるのも魅力かもしれません。

Chart.jsの日本語ページ

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

グラフ作成の一例

それではChart.jsを使ってグラフをいくつか作成してみます。大きくわけて4つの手順で作成します。

  1. Chart.jsの読み込み
  2. グラフを表示する場所をHTMLソースに記述する
  3. グラフのデータを用意する
  4. グラフの種類と表示方法を指定した処理を記述する

Chart.jsの読み込みは、CDN(Content Delivery Network)というネット上からライブラリを直接読み込むサービスがあるので、これを使うことでライブラリのダウンロードは不要になり、ファイルパスを気にせず下記の1行で使用できるようになります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

グラフの表示する場所は、HTMLソースにcanvasタグを記述するだけです。JavaScriptからのアクセス用にidとしてchartAreaという名前をつけました。

<canvas id="chartArea"></canvas>

ここまで用意したら、後はグラフのデータや種類を変えて好きな表示をします。

棒グラフ

まずは最小の構成で3教科のテストの点数を表示してみます。色やメモリなどはChart.jsのデフォルト(初期のもの)が適用されます。

let chartArea = document.getElementById("chartArea");
//データを用意する
let data = { 
  labels: ['国語', '数学', '社会'],
  datasets: [{
    label:"テストの点数",
    data: [70, 85, 40]
  }]
}

//表示処理
var myChart = new Chart(chartArea, {
  type: 'bar',
  data: data
});

モノクロで縦軸のメモリも0から始まりません。表示に色をつけ、縦軸をテストの点数なので0〜100に設定してみます。

let data = { 
  labels: ['国語', '数学', '社会'],
  datasets: [{
    label:"テストの点数",
    data: [70, 85, 40],
    backgroundColor: [
      '#ff0059',
      'blue',
      'rgba(255, 206, 86, 0.5)'
    ],

  }]
}
let options = {
  scales: {
    yAxes: [{
      ticks: {
        min:0,
        max:100
      }
    }]
  }
}
var myChart = new Chart(chartArea, {
    type: 'bar',
    data: data,
    options: options
});

色の指定はCSSと同じようにカラーネームやrgbaでの指定が可能です。オプションにて、縦軸や横軸の設定をします。Chart.jsのサイトで設定する値を探していろいろ試してみてください。

円グラフ

円グラフも作成してみます。先程のデータを円グラフで点数の割合を表現します。棒グラフのJavaScriptソースのoptionsをなくしてtypeをbarからpieに変更するだけです。

var myPieChart = new Chart(chartArea,{
    type: 'pie',
    data: data,
});

いずれのグラフも画面サイズに合わせて表示サイズを変えてくれます。ウインドウのサイズを変えて確認してみてください。また、マウスカーソスを乗せるとツールチップも表示されます。

 

監修してくれたメンター

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。