シェアする

【Chart.js】円グラフ(ドーナッツ型)の作成・設定

スポンサーリンク
ビッグバナー(上2)

この記事では、Javascriptライブラリ「Chart.js」で円グラフ(ドーナッツ型)の作成・設定をする方法をソースコード付きでまとめました。

円グラフ(ドーナッツ型)の作成・設定

Chart.jsでは、Canvusを使って手軽に円グラフ(ドーナッツ型)を作成できます。

ソースコード

サンプルプログラムのソースコードです。
【Javascript(main.js)】

パラメータ 内容
Chart : type グラフの種類(doughnutを指定するとドーナッツ型円グラフで表示)
Chart : data : label 凡例に表示するデータ名
Chart : datasets : data データ群(配列)
Chart : data : datasets : backgroundColor 背景色
Chart : data : datasets : borderColor 枠線色
Chart : data : datasets : hoverBackgroundColor 背景色(マウスーオーバ時)
Chart : data : datasets : hoverBorderColor 枠線色(マウスーオーバ時)

【HTML(index.html)】

実行結果

サンプルプログラムの実行結果です。
サンプルデモページ

【関連記事】
Chart.js入門 グラフ・チャート作成
Javascript入門

スポンサーリンク
レクタングル(下2)
レクタングル(下2)