D3.jsを使って円グラフを作成してみます。
大まかな使い方は前回の記事をご確認ください。
サンプルコード
HTML
<div id="sample"></div>
JavaScript
// グラフに表示するデータ
var dataArr = [110, 450, 870, 300, 630];
var colorArr = ['#E74C3C', '#3498DB', '#2ECC71', '#9B59B6', '#34495e'];
// グラフ全体のサイズ
var svgWidth = 500;
var svgHeight = 500;
// グラフの枠作成
var svg = d3.select('#sample').append('svg').attr({
width: svgWidth,
height: svgHeight
});
// 円グラフを作成
var pie = d3.layout.pie().sort(null).value(function(d) {
return d;
});
// 円グラフのサイズを指定
var arc = d3.svg.arc().innerRadius(50).outerRadius(svgWidth / 2);
// 円グラフを描画
svg.selectAll('path').data(pie(dataArr)).enter().append('path').style({
fill: function(d, i) {
return colorArr[i];
}
}).attr({
d: arc,
transform: 'translate(' + svgWidth / 2 + ', ' + svgHeight / 2 + ')'
})
| d3.layout.pie() | 円グラフを作成する。 |
|---|---|
| pie.sort() | 円グラフのデータの並び替えの指定。 指定が無い場合はデータの大きい順に並び替え。nullの場合は並び替え無効。 |
| pie.value([accessor]) | データから使用する値を取得する方法を指定する。 |
| d3.svg.arc() | 円弧を作成する。 |
| arc.innerRadius() | 円グラフの内側の半径を指定する。 |
| arc.outerRadius() | 円グラフの外側の半径を指定する。 |
| selection.style(name[, value]) | nameのみの場合、指定したプロパティの値を返す。 nameとvalue両方ある場合、指定したプロパティの値を設定する。 |
【参考サイト】
コメントが承認されるまで時間がかかります。