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

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

目次

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

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

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

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

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

お願いします！

はじめに

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

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

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

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

ライブラリとは

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

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

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

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

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

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

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

[PR] フロントエンドで副業する学習方法を動画で公開中

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

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

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

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

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

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

Chart.jsの日本語ページ

コラム

コスパとタイパ、両方結果的に良くなる良くなる学び方とは？

「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

• ・困ったときに、質問や相談できる相手がいるため挫折しなかった
• ・プロとして必要なスキルのみを深く学べたので無駄がなかった
• ・副業案件の提供と納品までのサポートがあったので目的を達成できた

安価・短期間で広く浅く学んでも意味がありません。 本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に 無料相談 に参加してみませんか？

カウンセラー・現役のプロへ、何でも気軽に無料相談可能。 30分か60分お好きな時間が選べて、かつ3回まで すべて無料で ご利用できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

グラフ作成の一例

それでは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サービス開発を学べます。

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

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

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

• ・調べてもほしい情報が見つからない
• ・独学のスキルが実際の業務で通用するのか不安
• ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する