「Chart.js」を使って簡単!グラフサンプル7種と設定方法

Other

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

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

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

 

グラフサンプル

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

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

 

それぞれの設定方法は以下の表内リンクより。

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

 

ルクセリタスの場合は、左側のリンク内記事を参考に、記事編集画面で下にある「追加ヘッダー(記事ごとに追加できるコード)」に記述して下さい。

 

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

 

関連記事

Other

Posted by 綾糸