Contents
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タグでたった１行で完了
HTML本文の、グラフを表示したい場所にはcanvasタグを使用します。
ID名は何でも大丈夫です。
myChartでも、yourChartでも、orenoChartでも、お好きな名前をつけてください。
JS部分 基本的なグラフの書き方
表示結果
見ての通りのデフォルトの特徴は、曲線で、色が塗られています。
（普段は線グラフと言うと、直線でカクカクしたものを想像するので、ベジェ曲線のグラフは違和感があります。）
変数（varの後の部分）はお好きな名前でどうぞ。
ここで２行目の
getElementById(‘myChart’);
の呼び出しは、HTMLで決めたcanvasの変数です。
その他の変数の名称も適宜そろえてください。
４行目
type: ‘line’
で、グラフの形を決めるのですが、lineは線グラフです。
ちなみに棒グラフは
type: ‘bar’
となります。
６行目
labels: []
内に、横軸のラベル、この例では年をコンマ区切りで入れています。
８行目
label: ‘日本の出生児数の推移’
は、グラフのタイトルです。省略も可です。
９〜10行目
backgroundColor: ‘rgb(255, 99, 132)’
borderColor: ‘rgb(255, 99, 132)’
は、塗りつぶしの色と線の色です。
ここではrgbで書いていますが、
backgroundColor: ‘red’
などのように、色名で指定することもできます。
11行目
data: []
この中に、縦軸の数値をコンマ区切りで、記載します。
２つのグラフを同時に表示する
表示結果
２種類のグラフを一緒に表示するには、datasetの中身をもう１セット描くだけです。
分かりやすくするために、２種類のグラフの色だけは変えておきましょう。
直線グラフにする
曲線グラフはどうも見慣れないので、これを直線のカクカクしたグラフにしたいと思います。
あと塗りつぶしも慣れない。。
表示結果
12〜13行目、19〜20行目にあるようにそれぞれ２行追加します。
lineTension: 0
これは、直線にします。
fill: false
これは、塗りをオフにします。
横軸、縦軸に「年」と「人」をつけて完成
23〜38行目が追加されました。
