「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 綾糸