>> テーマ変更に伴い見づらい箇所や不具合があるかもしれません、ご迷惑をおかけします。→
PR

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

Other
この記事は約2分で読めます。

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

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

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


グラフサンプル

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

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

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

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

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

コメント

'+'>'}}})()
タイトルとURLをコピーしました