JS

【制作時間の目安 : 5分】Chart.jsを使って折れ線グラフを描いてみよう

  • このエントリーをはてなブックマークに追加

Chart.jsは特に難しい知識不要

グラフ描画ライブラリのChart.jsは、プログラムが書けなくても、JSが分からなくても、Web上にグラフを表示できてしまいます。

お湯を沸かしてカップ麺ができる頃にはグラフが出来上がるくらいの手軽さです。

ちなみに、Chart.jsはオープンソースです。

ライセンスもMITなので、誰でも、どんなサイトにも、商用・非商用問わず無料で利用できます。

今回作りたいグラフ

今回作りたいグラフのサンプルはこちらです。

CDN読み込み

Chart.jsを利用するために、まずはCDNを読み込みます。
CDNはhead内に次のように書きます。

または

現時点での最新版の2.9.3を使用しています。
バージョンは各自でご確認を。

CDN使用でなく、ダウンロードして使いたい場合はGitHubにありますので、下記よりダウンロードしてください。
https://github.com/chartjs/Chart.js/releases/tag/v2.9.3

HTMLはcanvasタグでたった1行で完了

HTML本文の、グラフを表示したい場所にはcanvasタグを使用します。

ID名は何でも大丈夫です。
myChartでも、yourChartでも、orenoChartでも、お好きな名前をつけてください。

JS部分 基本的なグラフの書き方

表示結果

見ての通りのデフォルトの特徴は、曲線で、色が塗られています。
(普段は線グラフと言うと、直線でカクカクしたものを想像するので、ベジェ曲線のグラフは違和感があります。)

変数(varの後の部分)はお好きな名前でどうぞ。

ここで2行目の
getElementById(‘myChart’);
の呼び出しは、HTMLで決めたcanvasの変数です。

その他の変数の名称も適宜そろえてください。

4行目
type: ‘line’
で、グラフの形を決めるのですが、lineは線グラフです。

ちなみに棒グラフは
type: ‘bar’
となります。

6行目
labels: []
内に、横軸のラベル、この例では年をコンマ区切りで入れています。

8行目
label: ‘日本の出生児数の推移’
は、グラフのタイトルです。省略も可です。

9〜10行目
backgroundColor: ‘rgb(255, 99, 132)’
borderColor: ‘rgb(255, 99, 132)’
は、塗りつぶしの色と線の色です。

ここではrgbで書いていますが、
backgroundColor: ‘red’
などのように、色名で指定することもできます。

11行目
data: []
この中に、縦軸の数値をコンマ区切りで、記載します。

2つのグラフを同時に表示する

表示結果

2種類のグラフを一緒に表示するには、datasetの中身をもう1セット描くだけです。

分かりやすくするために、2種類のグラフの色だけは変えておきましょう。

直線グラフにする

曲線グラフはどうも見慣れないので、これを直線のカクカクしたグラフにしたいと思います。
あと塗りつぶしも慣れない。。

表示結果

12〜13行目、19〜20行目にあるようにそれぞれ2行追加します。
lineTension: 0
これは、直線にします。

fill: false
これは、塗りをオフにします。

横軸、縦軸に「年」と「人」をつけて完成

23〜38行目が追加されました。

できあがりのグラフ デモページ

  • このエントリーをはてなブックマークに追加