この記事では、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ライブラリ「Chart.js」でグラフ・チャートを描く方法をサンプルコード付きでまとめました。
web.joho.info
2024.07.04
【Javascript入門】基礎的な使い方とサンプル集
入門者向けにJavascriptの基本文法やサンプルプログラムを解説しています。
web.joho.info
2024.07.04
コメント