「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。
それらを組み合わせた混合チャートも可能です。
様々なグラフのサンプルは公式サイトで見る事が出来ます。
Chart.js（公式サイト）
Chart.js ドキュメント
チャートの設定方法
- type：描画するグラフの種類
- data：ラベルとデータセット
- options：オプション設定
グラフの種類は「type」で指定します。
テーマが「Cocoon」の場合は右側のリンクから、
それ以外は左側のリンクからご覧ください。
| 表示サンプル | type | 設定方法 | |
|---|---|---|---|
| 一般 | Cocoon | ||
 | radar | レーダーチャート | |
| 詳細 | 詳細 | ||
 | line | 折れ線グラフ | |
| 詳細 | 詳細 | ||
 | bar | 棒グラフ | |
| 詳細 | 詳細 | ||
 | pie | 円グラフ | |
| 詳細 | 詳細 | ||
 | polarArea | ポーラーチャート | |
| 詳細 | 詳細 | ||
 | doughnut | ドーナツチャート | |
| 詳細 | 詳細 | ||
 | bar、line | 複合グラフ | |
| 詳細 | 詳細 | ||
 | scatter | 散布図 | |
 | bubble | バブルチャート | |
グラフサンプル
レーダーチャート
こちらの使い方詳細は以下にまとめています。
コピペで！「Chart.js」を使ってレーダーチャートを表示する | 綾糸.net
ブログ内にレーダーチャートを表示したかった為、色々なプラグインなども探しましたが、一番手軽で思ったようなキレイなチャートが表示できる軽量のJavaScript「Chart.js」を...
ayaito.net
コピペで！Cocoonでレーダーチャートを表示する方法「Chart.js」
「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。 それらを組み合わせた混合チャートも可能です。 様々なグラフのサン...
sec.ayaito.net
折れ線グラフ
１種のグラフ
２種のグラフ
こちらの使い方詳細は以下にまとめています。
コピペで！「Chart.js」を使って折れ線グラフを表示する | 綾糸.net
軽量で簡単に実装できる「Chart.js」を使った折れ線グラフの表示方法についてです。 「Chart.js」では、棒グラフや円グラフ、折れ...
ayaito.net
コピペで！Cocoonで折れ線グラフを表示する方法「Chart.js」
「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。 それらを組み合わせた混合チャートも可能です。 様々なグラフのサン...
sec.ayaito.net
棒グラフ
こちらの使い方詳細は以下にまとめています。
コピペで！「Chart.js」を使って棒グラフを表示する | 綾糸.net
軽量で簡単に実装できる「Chart.js」を使った棒グラフの表示方法についてです。 「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダー...
ayaito.net
コピペで！Cocoonで棒グラフを表示する方法「Chart.js」
「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。 それらを組み合わせた混合チャートも可能です。 様々なグラフのサン...
sec.ayaito.net
円グラフ
こちらの使い方詳細は以下にまとめています。
コピペで！「Chart.js」を使って円・ドーナツグラフを表示する | 綾糸.net
軽量で簡単に実装できる「Chart.js」を使った円グラフと、ドーナツチャートの表示方法についてです。 「Chart.js」では、棒グラフ...
ayaito.net
コピペで！Cocoonで円グラフ・ドーナツチャートを表示する「Chart.js」
「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。 それらを組み合わせた混合チャートも可能です。 様々なグラフのサン...
sec.ayaito.net
ドーナツチャート
こちらの使い方詳細は以下にまとめています。
コピペで！「Chart.js」を使って円・ドーナツグラフを表示する | 綾糸.net
軽量で簡単に実装できる「Chart.js」を使った円グラフと、ドーナツチャートの表示方法についてです。 「Chart.js」では、棒グラフ...
ayaito.net
Cocoonでの使い方は以下をご覧ください。
コピペで！Cocoonで円グラフ・ドーナツチャートを表示する「Chart.js」
「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。 それらを組み合わせた混合チャートも可能です。 様々なグラフのサン...
sec.ayaito.net
ポーラーチャート
こちらの使い方詳細は以下にまとめています。
コピペで！「Chart.js」を使ってポーラーチャートを表示する | 綾糸.net
軽量で簡単に実装できる「Chart.js」を使ったポーラーチャートの表示方法についてです。 「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、...
ayaito.net
コピペで！Cocoonでポーラーチャートを表示する方法「Chart.js」
「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。 それらを組み合わせた混合チャートも可能です。 様々なグラフのサン...
sec.ayaito.net
混合チャート
こちらの使い方詳細は以下にまとめています。
コピペで！「Chart.js」を使って混合（棒＋折れ線）チャートを表示する | 綾糸.net
軽量で簡単に実装できる「Chart.js」を使った棒グラフと折れ線グラフの複合チャートの表示方法についてです。 「Chart.js」では、棒グラフや円グ...
ayaito.net
コピペで！Cocoonで混合（棒＋折れ線）グラフを表示する方法「Chart.js」
「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。 それらを組み合わせた混合チャートも可能です。 様々なグラフのサン...
sec.ayaito.net
コメント