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

この記事では、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	枠線色(マウスーオーバ時)