【Chart.js】円グラフの作成・設定

この記事では、Javascriptライブラリ「Chart.js」で円グラフ（パイチャート）の作成・設定をする方法をソースコード付きでまとめました。

円グラフ（パイチャート）の作成・設定

Chart.jsでは、Canvusを使って手軽に円グラフ（パイチャート）を作成できます。

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

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