面白い動きや便利な機能をJSで実装！その2：いろんな種類のグラフを簡単に作成！

投稿日：2015年2月19日更新日：2023年12月6日

以前ご紹介しました面白い動きや便利な機能をJSで実装！その１：簡単にグラフを作成する方法！の応用編になります。
前回は折れ線グラフをご紹介致しましたが、今回は「棒グラフ」「レーダーチャート」「円グラフ」「鶏頭図（円グラフの一種）」「ドーナツチャート」を作成してみたいと思います。
今回も前回と同じく引き続き「Chart.js」を使用してグラフを作成してみたいと思います。

1 全グラフ共通の設定
- 1.1 初めにJSを設置します。
2 棒グラフの設定
- 2.1 デモ
- 2.2 実装方法
  - 2.2.1 ◆ グラフを入れたい場所にソースを設置します
  - 2.2.2 ◆ グラフの数値を設定します
3 レーダーチャートの設定
- 3.1 デモ
- 3.2 実装方法
  - 3.2.1 ◆ グラフを入れたい場所にソースを設置します
  - 3.2.2 ◆ グラフの数値を設定します
4 円グラフの設定
- 4.1 デモ
- 4.2 実装方法
  - 4.2.1 ◆ グラフを入れたい場所にソースを設置します
  - 4.2.2 ◆ グラフの数値を設定します
5 鶏頭図（円グラフの一種）の設定
- 5.1 デモ
- 5.2 実装方法
  - 5.2.1 ◆ グラフを入れたい場所にソースを設置します
  - 5.2.2 ◆ グラフの数値を設定します
6 ドーナツチャートの設定
- 6.1 デモ
- 6.2 実装方法
  - 6.2.1 ◆ グラフを入れたい場所にソースを設置します
  - 6.2.2 ◆ グラフの数値を設定します

全グラフ共通の設定

初めにJSを設置します。

たったこれだけです。
あとはそれぞれのグラフを設置してみるだけです。

棒グラフの設定

デモ

実装方法

◆ グラフを入れたい場所にソースを設置します

canvasタグで「id」「高さ」「横幅」を設定してください。
「id」は任意の名前を設定してください。

◆ グラフの数値を設定します

var barChartData = {
labels : [“January”,”February”,”March”,”April”,”May”,”June”,”July”],
datasets : [
{
fillColor : “rgba(220,220,220,0.5)”,
strokeColor : “rgba(220,220,220,1)”,
data : [20,50,40,70,10,90,55]
},
{
fillColor : “rgba(151,187,205,0.5)”,
strokeColor : “rgba(151,187,205,1)”,
data : [40,70,90,10,46,32,99]
}
]
}
var myLine = new Chart(document.getElementById(“bar_chart”).getContext(“2d”)).Bar(barChartData);

getElementByIdに上で設定した「id」を入れてください。

レーダーチャートの設定

デモ

実装方法

◆ グラフを入れたい場所にソースを設置します

◆ グラフの数値を設定します

var radarChartData = {
labels : [“Eating”,”Drinking”,”Sleeping”,”Designing”,”Coding”,”Partying”,”Running”],
datasets : [
{
fillColor : “rgba(220,220,220,0.5)”,
strokeColor : “rgba(220,220,220,1)”,
pointColor : “rgba(220,220,220,1)”,
pointStrokeColor : “#fff”,
data : [20,40,30,55,90,95,70]
},
{
fillColor : “rgba(151,187,205,0.5)”,
strokeColor : “rgba(151,187,205,1)”,
pointColor : “rgba(151,187,205,1)”,
pointStrokeColor : “#fff”,
data : [80,25,75,62,100,10,50]
}
]
}
var myRadar = new Chart(document.getElementById(“radar_chart”).getContext(“2d”)).Radar(radarChartData,{scaleShowLabels : false, pointLabelFontSize : 10});

円グラフの設定

デモ

実装方法

◆ グラフを入れたい場所にソースを設置します

◆ グラフの数値を設定します

var pieData = [
{
value: 40,
color:”#F38630″
},
{
value : 50,
color : “#E0E4CC”
},
{
value : 60,
color : “#69D2E7”
}
];
var myPie = new Chart(document.getElementById(“pie_chart”).getContext(“2d”)).Pie(pieData);

鶏頭図（円グラフの一種）の設定

デモ

実装方法

◆ グラフを入れたい場所にソースを設置します

◆ グラフの数値を設定します

var chartData = [
{
value : 100,
color: “#D97041”
},
{
value : 50,
color: “#C7604C”
},
{
value : 20,
color: “#21323D”
},
{
value : 40,
color: “#9D9B7F”
},
{
value : 80,
color: “#7D4F6D”
},
{
value : 55,
color: “#584A5E”
}
];
var myPolarArea = new Chart(document.getElementById(“polarArea_chart”).getContext(“2d”)).PolarArea(chartData);

ドーナツチャートの設定

デモ

実装方法

◆ グラフを入れたい場所にソースを設置します

◆ グラフの数値を設定します

var doughnutData = [
{
value: 40,
color:”#F7464A”
},
{
value : 90,
color : “#46BFBD”
},
{
value : 100,
color : “#FDB45C”
},
{
value : 50,
color : “#949FB1”
},
{
value : 20,
color : “#4D5360”
}
];
var myDoughnut = new Chart(document.getElementById(“doughnut_chart”).getContext(“2d”)).Doughnut(doughnutData);

以上、「棒グラフ」「レーダーチャート」「円グラフ」「鶏頭図（円グラフの一種）」「ドーナツチャート」をご紹介致しました。
また、数値を入れる部分に「Math.random()」を使用すると数値をランダムにすることも出来ます。

例）
「Math.floor( Math.random() * 51 )」で0以上51未満
「var randnum = 30 + Math.floor( Math.random() * 21 );」で30以上51未満

ファイルのダウンロードは下記からお願い致します。

Chart.js公式サイト
http://www.chartjs.org/