コピペで!「Chart.js」を使って円・ドーナツグラフを表示する

軽量で簡単に実装できる「Chart.js」を使った円グラフと、ドーナツチャートの表示方法についてです。




「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。
それらを組み合わせた混合チャートも可能です。
様々なグラフのサンプルは公式サイトで見る事が出来ます。
Chart.js(公式サイト)
Chart.js ドキュメント
チャートの設定方法
- type:描画するグラフの種類
- data:ラベルとデータセット
- options:オプション設定
グラフの種類は「type」で指定します。
それぞれの詳細な使い方記事は、以下の表内リンクから。
表示サンプル | type | グラフの種類 |
---|---|---|
![]() ![]() |
radar | レーダーチャート |
![]() ![]() |
line | 折れ線グラフ |
![]() ![]() |
bar | 棒グラフ |
![]() ![]() |
pie | 円グラフ |
![]() ![]() |
polarArea | ポーラーチャート |
![]() ![]() |
doughnut | ドーナツ |
![]() ![]() |
scatter | 散布図 |
![]() ![]() |
bubble | バブルチャート |
棒+折れ線の複合チャート の 詳細はこちら
円グラフ・ドーナツチャート
今回は、円グラフ type: 'pie’ と ドーナツチャート type: 'doughnut’ の実装方法です。
この2つのグラフはタイプ(グラフの種類)設定以外、共通のコードで実装出来ます。
コピペで使って頂けるようにコードを紹介します。
手順
- Chart.jsを読み込むコードを記述(1行のみ<head>または<body>内に)
- JavaScriptを記述(データやデザイン設定)
- HTMLを記述(1行のみのグラフ表示用タグ)
これだけです!
では順番に・・
Chart.jsを読み込む
サイト内の色々なページでグラフ表示する
特定のページのみでしか利用しない場合
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
JavaScriptを記述
注意点
円グラフ
コードを表示
<script>
var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["賛成", "反対", "わからない", "未回答"], //データ項目のラベル
datasets: [{
backgroundColor: [
"#c97586",
"#bbbcde",
"#93b881",
"#e6b422"
],
data: [45, 32, 18, 5] //グラフのデータ
}]
},
options: {
title: {
display: true,
//グラフタイトル
text: '新法案賛否'
}
}
});
</script>
ドーナツチャート


コードを表示
<script>
var ctx = document.getElementById("myDoughnutChart");
var myDoughnutChart= new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["賛成", "反対", "わからない", "未回答"], //データ項目のラベル
datasets: [{
backgroundColor: [
"#c97586",
"#bbbcde",
"#93b881",
"#e6b422"
],
data: [45, 32, 18, 5] //グラフのデータ
}]
},
options: {
title: {
display: true,
//グラフタイトル
text: '新法案賛否'
}
}
});
</script>
簡単解説
chart.js Pie(円グラフ)doughnut(ドーナツ)解説 ※外部リンク
1行目で記述している「myPieChart」、「myDoughnutChart」は、任意の名称です。
同一ページ内に複数のグラフを表示する際には、この名称をそれぞれに設定します。
例:円グラフを2つ表示
myPieChart1
myPieChart2
データ項目ラベル
項目数はいくつでもOKです。増やした場合は、データ内容も同数にする事をお忘れなく!
グラフデータ
実際の数値を設定します。
オプション
グラフ上に表示するテキスト(グラフタイトル)を設定しています。
title: {
display: true,
//グラフタイトル
text: '新法案賛否’
}
}
HTMLを記述
円グラフ
<canvas id="myPieChart">
</canvas>
ドーナツチャート
<canvas id="myDoughnutChart">
</canvas>
注意点
表示する為のHTMLはこれだけですが、上記コードのように、
WordPressの場合、タグのみの行はビジュアルエディタとテキストエディタを行き来するだけで消えてしまうのを防ぐ為です。
何かしらの文字を入れれば消えませんが、今回は文字の必要がない為、一番楽な「改行」で対応しています。
以上で完了です。
グラフが表示されない時
記述したJavaScriptとHTMLを見直して下さい。
JavaScript
1~2行目
var ctx = document.getElementById(“myPieChart“);
var myPieChart= new Chart(ctx, {
HTML
<canvas id="myPieChart“>
上記の解説にも書きましたが、複数のグラフを同一ページ内で表示する場合は、名称を変える必要がありますのでご注意下さい。
例:円グラフを2つ表示
myPieChart1
myPieChart2
JavaScript、HTMLのそれぞれに対応して名称が間違えていないか確認。
ディスカッション
コメント一覧
まだ、コメントがありません