Chart.jsによるチャート作成（概要と目次）

Chart.jsは、棒グラフ、折線グラフ、円グラフなどを作成するJavascriptのオープンソースのライブラリです。あまりにも仕様が豊富なので、ここでは私が使う範囲（理解した範囲？）に限定して例示しました。個人的忘備録のような性格です。

	棒グラフ	折線グラフ	円グラフドーナツ	レーダチャート	内容
Chart.js概要	〇	〇	〇	〇	Chart.jsの概要、利用方法、各種設定の概要
タイトル・凡例	〇	〇	〇	〇	表示・非表示、表示位置、フォント等
棒グラフ概要	〇
折線グラフ概要		〇
ＸＹ軸スケール	〇	〇			軸の最大値、最小値、刻み幅、Ｘ軸の目盛りラベル設定（scales.xAxes/yAxes.ticks）
棒幅の設定	〇				棒グラフの棒の幅や間隔（xAxes.barPercentage）
軸ラベル等の設定	〇	〇			軸ラベル、目盛線、目盛りのデザイン（scaleLabel, gridLines, ticks）
複合グラフの概要	〇	〇			棒グラフと折線グラフの複合グラフの概要
複数軸の設定	〇	〇			複合グラフでの「Ｙ左軸」と「Ｙ右軸」の設定詳細
datalabel	〇	〇	〇	〇	数値表示プラグイン dataLabelPlugin の利用
円・ドーナツ図			〇
pieceLabel			〇		円グラフ、ドーナツ図に％値や凡例を表示するプラグイン pieceLabel の利用
レーダーチャート				〇
chartjsGenerator	〇	〇	〇		自作のchartjsコード生成ツール

参照：Chart.js 日本語ドキュメント（https://misc.0o0o.org/chartjs-doc-ja/）

Chart.jsの概要

Canvasを使ってチャートを描くJavascriptのライブラリは多くありますが、Chart.jsは代表的なオープンソースソフトウェアです。
次のようなチャートをサポートしており（type: "bar" のように記述します）、単純なチャートならば、初心者でもすぐに使えますし、細かい指定ができる多様なオプション機能があります。
　　line：折線グラフ
　　bar：棒グラフ、horizontalBar：横棒グラフ
　　pie：円グラフ
　　doughnut：ドーナッツ図
　　polarArea：鶏頭図
　　radar：レーダーチャート
　　scatter：散布図
　　bubble：バブルチャート

利用方法

ＨＴＭＬに次の3つの記述をするだけでよいのです。

ライブラリの指定: head部に次の記述をします。最新版などはhttps://cdnjs.com/libraries/Chart.jsを参照してください。
　　　<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>; Body部に表示場所としてCanvasを記述します。
　　　<canvas id="表示場所" width="400" height="300"></canvas>
Chartプログラムの記述例: Script部に次の記述をします。これにより、下図の棒グラフが描かれます。
Chart.jsでは「名称付き引数」が使われています。そのため、｛ } [ ] ( ) , を間違えないように留意する必要があります。

棒にマウスを乗せると値が表示されます。
凡例をクリックすると、その系列が非表示／表示になります。

（これを記述するのも面倒だという人は、chartjsコード生成ツールchartjsGeneratorをお試しください。）

データの表示

Chart.jsでは、グラフのデータ数値表示は、グラフにマウスを乗せると数値が表示されるのを標準仕様としており、グラフに表示させるにはプラグインが必要になります。

responsiveについて

Chart.jsでは、HTMLでのcanvasのサイズ指定に関係なく、Chart.jsがサイズを自動設定する機能があり、それをデフォルト指定にしています。この機能は、データの変更に応じてサイズを変更する、特にアニメーションさせるときなどに有効な機能なのですが、単純な用途では、思わぬ大きさになる（画面いっぱいに表示されるなど）などの副作用もあります。
それで、ここでは responsive: false により、自動設定機能を無効にして、HTMLでのサイズ指定に合わせることにしています。

データ等の外部指定と汎用化

上例のように、Chartプログラムの内部にデータなどを記述するよりも、それらを外部で指定するほうが便利ですし、Chartプログラムを汎用化できます。以下は、棒グラフと全く同じデータを折線グラフにしたものです。
系列色を "red" などではなく"rgba(153,255,51,0.4)"のように透明色にしたのは、図が重なる部分を考慮したからです。

グラフの点にマウスを乗せると値が表示されます。

各種の設定

Chart.js では多様な設定ができます。それには、
　　datasetsでの指定：個々の系列ごとに異なる指定をする（グラフの色など）
　　optionでの指定：　全体を通して指定する（軸のスケールや凡例の表示位置など）
があります。
ここでは、説明は省略して例示するだけにします。

グラフのデータ数値表示

右図のように数値を表示するには、プラグイン（dataLabelPlugin）を用います。
これは、関数をグローバル変数として格納したもので、Chart.jsプログラムより以前に定義しておく必要があります。
そして、Chart.jsプログラムでは、次のように plugins: [dataLabelPlugin] を組み込むことにより、数値が表示されます。
詳細は、「数値表示のプラグイン」で説明します。

           :
        data: {
           :
        },
        options: {
           :
        },
        plugins: [dataLabelPlugin]

プラグイン（dataLabelPlugin）のソース