Chart.jsは、棒グラフ、折線グラフ、円グラフなどを作成するJavascriptのオープンソースのライブラリです。あまりにも仕様が豊富なので、ここでは私が使う範囲(理解した範囲?)に限定して例示しました。個人的忘備録のような性格です。
棒グラフ | 折線グラフ | 円グラフ ドーナツ | レーダ チャート | 内容 | |
Chart.js概要 | 〇 | 〇 | 〇 | 〇 | Chart.jsの概要、利用方法、各種設定の概要 |
タイトル・凡例 | 〇 | 〇 | 〇 | 〇 | 表示・非表示、表示位置、フォント等 |
棒グラフ概要 | 〇 | ||||
折線グラフ概要 | 〇 | ||||
XY軸スケール | 〇 | 〇 | 軸の最大値、最小値、刻み幅、X軸の目盛りラベル設定(scales.xAxes/yAxes.ticks) | ||
棒幅の設定 | 〇 | 棒グラフの棒の幅や間隔(xAxes.barPercentage) | |||
軸ラベル等の設定 | 〇 | 〇 | 軸ラベル、目盛線、目盛りのデザイン(scaleLabel, gridLines, ticks) | ||
複合グラフの概要 | 〇 | 〇 | 棒グラフと折線グラフの複合グラフの概要 | ||
複数軸の設定 | 〇 | 〇 | 複合グラフでの「Y左軸」と「Y右軸」の設定詳細 | ||
datalabel | 〇 | 〇 | 〇 | 〇 | 数値表示プラグイン dataLabelPlugin の利用 |
円・ドーナツ図 | 〇 | ||||
pieceLabel | 〇 | 円グラフ、ドーナツ図に%値や凡例を表示するプラグイン pieceLabel の利用 | |||
レーダーチャート | 〇 | ||||
chartjsGenerator | 〇 | 〇 | 〇 | 自作のchartjsコード生成ツール |
参照:Chart.js 日本語ドキュメント(https://misc.0o0o.org/chartjs-doc-ja/)
Canvasを使ってチャートを描くJavascriptのライブラリは多くありますが、Chart.jsは代表的なオープンソースソフトウェアです。
次のようなチャートをサポートしており(type: "bar" のように記述します)、単純なチャートならば、初心者でもすぐに使えますし、細かい指定ができる多様なオプション機能があります。
line:折線グラフ
bar:棒グラフ、horizontalBar:横棒グラフ
pie:円グラフ
doughnut:ドーナッツ図
polarArea:鶏頭図
radar:レーダーチャート
scatter:散布図
bubble:バブルチャート
HTMLに次の3つの記述をするだけでよいのです。
棒にマウスを乗せると値が表示されます。
凡例をクリックすると、その系列が非表示/表示になります。
(これを記述するのも面倒だという人は、chartjsコード生成ツールchartjsGeneratorをお試しください。)
Chart.jsでは、グラフのデータ数値表示は、グラフにマウスを乗せると数値が表示されるのを標準仕様としており、グラフに表示させるにはプラグインが必要になります。
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)のソース