「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」を...

コピペで!Cocoonでレーダーチャートを表示する方法「Chart.js」
「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。 それらを組み合わせた混合チャートも可能です。 様々なグラフの...
折れ線グラフ
1種のグラフ
2種のグラフ
こちらの使い方詳細は以下にまとめています。

コピペで!「Chart.js」を使って折れ線グラフを表示する | 綾糸.net
軽量で簡単に実装できる「Chart.js」を使った折れ線グラフの表示方法についてです。 「Chart.js」では、棒グラフや円グラフ、折れ...

コピペで!Cocoonで折れ線グラフを表示する方法「Chart.js」
「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。 それらを組み合わせた混合チャートも可能です。 様々なグラフの...
棒グラフ
こちらの使い方詳細は以下にまとめています。

コピペで!「Chart.js」を使って棒グラフを表示する | 綾糸.net
軽量で簡単に実装できる「Chart.js」を使った棒グラフの表示方法についてです。 「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダー...

コピペで!Cocoonで棒グラフを表示する方法「Chart.js」
「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。 それらを組み合わせた混合チャートも可能です。 様々なグラフの...
円グラフ
こちらの使い方詳細は以下にまとめています。

コピペで!「Chart.js」を使って円・ドーナツグラフを表示する | 綾糸.net
軽量で簡単に実装できる「Chart.js」を使った円グラフと、ドーナツチャートの表示方法についてです。 「Chart.js」では、棒グラフ...

コピペで!Cocoonで円グラフ・ドーナツチャートを表示する「Chart.js」
「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。 それらを組み合わせた混合チャートも可能です。 様々なグラフのサン...
ドーナツチャート
こちらの使い方詳細は以下にまとめています。

コピペで!「Chart.js」を使って円・ドーナツグラフを表示する | 綾糸.net
軽量で簡単に実装できる「Chart.js」を使った円グラフと、ドーナツチャートの表示方法についてです。 「Chart.js」では、棒グラフ...
Cocoonでの使い方は以下をご覧ください。

コピペで!Cocoonで円グラフ・ドーナツチャートを表示する「Chart.js」
「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。 それらを組み合わせた混合チャートも可能です。 様々なグラフのサン...
ポーラーチャート
こちらの使い方詳細は以下にまとめています。

コピペで!「Chart.js」を使ってポーラーチャートを表示する | 綾糸.net
軽量で簡単に実装できる「Chart.js」を使ったポーラーチャートの表示方法についてです。 「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、...

コピペで!Cocoonでポーラーチャートを表示する方法「Chart.js」
「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。 それらを組み合わせた混合チャートも可能です。 様々なグラフの...
混合チャート
こちらの使い方詳細は以下にまとめています。

コピペで!「Chart.js」を使って混合(棒+折れ線)チャートを表示する | 綾糸.net
軽量で簡単に実装できる「Chart.js」を使った棒グラフと折れ線グラフの複合チャートの表示方法についてです。 「Chart.js」では、棒グラフや円グ...

コピペで!Cocoonで混合(棒+折れ線)グラフを表示する方法「Chart.js」
「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。 それらを組み合わせた混合チャートも可能です。 様々なグラフのサン...
コメント