「Chart.js」を使って簡単！グラフサンプル７種と設定方法
「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。
それらを組み合わせた混合チャートも可能です。
様々なグラフのサンプルは公式サイトで見る事が出来ます。
Chart.js（公式サイト）
Chart.js ドキュメント
グラフサンプル
- type：描画するグラフの種類
- data：ラベルとデータセット
- options：オプション設定
グラフの種類は「type」で指定します。
それぞれの設定方法は以下の表内リンクより。
テーマが「Cocoon」の場合は右側のリンクから、
それ以外は左側のリンクからご覧ください。
それ以外は左側のリンクからご覧ください。
ルクセリタスの場合は、左側のリンク内記事を参考に、記事編集画面で下にある「追加ヘッダー（記事ごとに追加できるコード）」に記述して下さい。
| 表示サンプル | type | 設定方法 | |
|---|---|---|---|
| 一般 | Cocoon | ||
 |
radar | レーダーチャート | |
| 詳細 | 詳細 | ||
 |
line | 折れ線グラフ | |
| 詳細 | 詳細 | ||
 |
bar | 棒グラフ | |
| 詳細 | 詳細 | ||
 |
pie | 円グラフ | |
| 詳細 | 詳細 | ||
 |
polarArea | ポーラーチャート | |
| 詳細 | 詳細 | ||
 |
doughnut | ドーナツチャート | |
| 詳細 | 詳細 | ||
 |
bar、line | 複合グラフ | |
| 詳細 | 詳細 | ||
 |
scatter | 散布図 | |
 |
bubble | バブルチャート | |
