JavascriptChart.jsによるチャート作成(概要と目次)Chart.jsは、棒グラフ、折線グラフ、円グラフなどを作成するJavascriptのオープンソースのライブラリです。あまりにも仕様が豊富なので、ここでは私が使う範囲(理解した範囲?)に限定して例示しました。個人的忘備録のような性格です。日本語ドキュメント(https://misc.0o0o.org/chartjs-doc-ja/)Chart.jsの概要Canvasを使ってチャートを描くJavascriptのライブラリは多くありますが、Chart.jsは代表的なオープンソースソフトウェアです。ように記述します)、単純なチャートならば、初心者でもすぐに使えますし、細かい指定ができる多様なオプション機能があります。line:折線グラフbar:棒グラフ、horizontalBar:横棒グラフpie:円グラフdoughnut:ドーナッツ図polarArea:鶏頭図radar:レーダーチャートscatter:散布図bubble:バブルチャート利用方法HTMLに次の3つの記述をするだけでよいのです。ライブラリの指定head部に次の記述をします。最新版などはhttps://cdnjs.com/libraries/Chart.jsを参照してください。src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>Canvasの指定Body部に表示場所としてCanvasを記述します。height="300"></canvas>Chartプログラムの記述例Script部に次の記述をします。これにより、下図の棒グラフが描かれます。Chart.jsでは「名称付き引数」が使われています。間違えないように留意する必要があります。棒にマウスを乗せると値が表示されます。凡例をクリックすると、その系列が非表示/表示になります。(これを記述するのも面倒だという人は、chartjsコード生成ツールchartjsGeneratorをお試しください。)データの表示Chart.jsでは、グラフのデータ数値表示は、グラフにマウスを乗せると数値が表示されるのを標準仕様としており、グラフに表示させるにはプラグインが必要になります。responsiveについてChart.jsでは、HTMLでのcanvasのサイズ指定に関係なく、Chart.jsがサイズを自動設定する機能があり、それをデフォルト指定にしています。この機能は、データの変更に応じてサイズを変更する、特にアニメーションさせるときなどに有効な機能なのですが、単純な用途では、思わぬ大きさになる(画面いっぱいに表示されるなど)などの副作用もあります。より、自動設定機能を無効にして、HTMLでのサイズ指定に合わせることにしています。上例のように、Chartプログラムの内部にデータなどを記述するよりも、それらを外部で指定するほうが便利ですし、Chartプログラムを汎用化できます。以下は、棒グラフと全く同じデータを折線グラフにしたものです。なく"rgba(153,255,51,0.4)"のように透明色にしたのは、図が重なる部分を考慮したからです。グラフの点にマウスを乗せると値が表示されます。多様な設定ができます。全体を通して指定する(軸のスケールや凡例の表示位置など)があります。ここでは、説明は省略して例示するだけにします。右図のように数値を表示するには、プラグイン(dataLabelPlugin)を用います。これは、関数をグローバル変数として格納したもので、Chart.jsプログラムより以前に定義しておく必要があります。組み込むことにより、数値が表示されます。詳細は、「数値表示のプラグイン」で説明します。[dataLabelPlugin]プラグイン(dataLabelPlugin)のソース。