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

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

スポンサーリンク
Web

 

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

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

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

 

スポンサーリンク

チャートの設定方法

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

 

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

それぞれの詳細な使い方記事は、以下の表内リンクから。

表示サンプルtypeグラフの種類
レーダーチャートサンプルradarレーダーチャート
折れ線グラフサンプルline折れ線グラフ
棒グラフサンプルbar棒グラフ
円グラフサンプルpie円グラフ
ポーラーチャートサンプルpolarAreaポーラーチャート
ドーナツチャートサンプルdoughnutドーナツ
散布図サンプルscatter散布図
バブルチャートサンプルbubbleバブルチャート
複合グラフサンプルbar、line複合グラフ

 

用途の多そうな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をコピーしました