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

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

目次

• はじめに
• ライブラリとは
• グラフ作成に使えるライブラリ
• グラフ作成の一例
• JavaScriptを学習中の方へ

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

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

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

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

お願いします！

はじめに

集計した結果などをグラフを使ってわかりやすくする方法についてお伝えします。

HTMLにはCanvasという図形を描画する機能がありますが、1から実装するとコーディングする量も多く、覚えることが多いです。

今回はChart.jsというライブラリを使い、手軽にグラフ描画を行う方法を説明します。

ダッシュボードや広告のLP制作などでとても役に立ちますので、ぜひ参考にしてみてください。

ライブラリとは

ライブラリとは、簡単にいうと部品のことです。

多くの人が使うようなものは、たいてい部品として用意されています。

用意された部品を使うことで、簡単かつ素早くやりたいことを実現できます。

例えば、車のおもちゃを組み立てる際にモーターを1から作ったら大変です。

しかし、すでに作られたモーターを使用すると楽に組み立てられます。

今回はチャートの表示をしてくれるライブラリ（部品）を使ってみます。

ライブラリを使うことで複雑なチャートも簡単に実装できます。

[PR] コーディングで副業する方法とは

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

グラフを作成してくれるライブラリはたくさんあります。

機能は少ないがシンプルなものや、豊富なカスタマイズができるものなど、用途に合わせて選んでください。

ほとんどのケースでは、最もメジャーなChart.jsで十分でしょう。

棒グラフや円グラフなど豊富なグラフの種類に加え、表示の色やアニメーションなども指定可能です。

また、英語のライブラリが多いなか、日本語ページがあるのも魅力かもしれません。

Chart.jsの日本語ページ

グラフ作成の一例

それでは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, { /*new Chart()で描画処理を行う*/
    type: 'bar',                     /*グラフの種類を棒グラフに指定*/
    data: data                       /*3行目の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: [{           /*y軸範囲*/
            ticks: {        /*y軸メモリ指定*/
                min:0,      /*y軸最小メモリを0に指定*/
                max:100     /*y軸最大メモリを100に指定*/
            }
        }]
    }
}
var myChart = new Chart(chartArea, {
        type: 'bar',
        data: data,
        options: options   /*13行目のoptionを反映*/
});

色の指定はCSSと同じようにカラーネームやrgbaでの指定が可能です。

オプションにて、縦軸や横軸の設定をします。

Chart.jsのサイトで設定する値を探して、いろいろ試してみてください。

円グラフ

円グラフも作成してみます。

先程のデータを円グラフで点数の割合を表現します。

棒グラフのJavaScriptソースのoptionsをなくして、typeをbarからpieに変更するだけです。

var myPieChart = new Chart(chartArea,{
    type: 'pie',        /*グラフの種類を円グラフに指定*/
    data: data,
});

いずれのグラフも画面サイズに合わせて表示サイズを変えてくれます。

ウィンドウのサイズを変えて確認してみてください。

また、マウスカーソスを乗せるとツールチップも表示されます。

ほかにもいろいろなグラフを描画できますので、ぜひ試してみてください。

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

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

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

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか？

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！