Cocoonの使い方やカスタマイズとオリジナルスキン

「Chart.js」を使ったグラフサンプル7種と使い方

スポンサーリンク
Web
この記事は約3分で読めます。

 

「Chart.js」では、棒グラフ円グラフ折れ線グラフレイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。
それらを組み合わせた混合チャートも可能です。

様々なグラフのサンプルは公式サイトで見る事が出来ます。

Chart.js(公式サイト)
Chart.js ドキュメント

 

スポンサーリンク

チャートの設定方法

  • type:描画するグラフの種類
  • data:ラベルとデータセット
  • options:オプション設定

 

グラフの種類は「type」で指定します。

 

テーマが「Cocoon」の場合は右側のリンクから、
それ以外は左側のリンクからご覧ください。

 

表示サンプルtype設定方法
一般Cocoon
レーダーチャートサンプルradarレーダーチャート
詳細詳細
折れ線グラフサンプルline折れ線グラフ
詳細詳細
棒グラフサンプルbar棒グラフ
詳細詳細
円グラフサンプルpie円グラフ
詳細詳細
ポーラーチャートサンプルpolarAreaポーラーチャート
詳細詳細
ドーナツチャートサンプルdoughnutドーナツチャート
詳細詳細
複合グラフサンプルbar、line複合グラフ
詳細詳細
散布図サンプルscatter散布図
バブルチャートサンプルbubbleバブルチャート

 

 

用途の多そうな7種のサンプルです。ホバーアクションなどの確認にご利用下さい。

 

グラフサンプル

レーダーチャート

 

 

 

こちらの使い方詳細は以下にまとめています。

コピペで!「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」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。 それらを組み合わせた混合チャートも可能です。 様々なグラフの...

 

コメント

タイトルとURLをコピーしました