D3.jsを使うとさまざまなグラフがかけるようです。
さまざまなグラフ例:https://github.com/d3/d3/wiki/Gallery
試しにPie charts labelsをもとに以下のサンプルグラフを作成してみました。
サンプル
変更点は以下です。
- グラフの背景色を透過色に変更
- 特定のdivにグラフを表示
- データをランダムではなく手入力に
HTML
<div id="piechart"></div>
CSS
#piechart { height: 500px; position: relative; background-image: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%); } svg { width: 100%; height: 100%; } path.slice{ stroke-width:2px; } polyline{ opacity: .3; stroke: #000; stroke-width: 2px; fill: none; }
JavaScript読み込み
<script src="http://d3js.org/d3.v3.min.js"></script>
JavaScript
var svg = d3.select("#piechart") .append("svg") .append("g") svg.append("g") .attr("class", "slices"); svg.append("g") .attr("class", "labels"); svg.append("g") .attr("class", "lines"); var width = 400, height = 200, radius = Math.min(width, height) / 2; var pie = d3.layout.pie() .sort(null) .value(function(d) { return d.value; }); var arc = d3.svg.arc() .outerRadius(radius * 0.8) .innerRadius(radius * 0.4); var outerArc = d3.svg.arc() .innerRadius(radius * 0.9) .outerRadius(radius * 0.9); svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); var key = function(d){ return d.data.label; }; var color = d3.scale.ordinal() .domain(["Lorem ipsum", "dolor sit", "amet", "consectetur", "adipisicing", "elit", "sed", "do", "eiusmod", "tempor", "incididunt"]) .range(["rgba(0, 0, 0, 0.8)", "rgba(0, 0, 0, 0.6)", "rgba(0, 0, 0, 0.4)", "rgba(0, 0, 0, 0.2)"]); datas = [{ label: "ラベル1", value: 38 }, { label: "ラベル2", value: 33 }, { label: "ラベル3", value: 17 }, { label: "ラベル4", value: 12 }]; change(datas); function change(data) { /* ------- PIE SLICES -------*/ var slice = svg.select(".slices").selectAll("path.slice") .data(pie(data), key); slice.enter() .insert("path") .style("fill", function(d) { return color(d.data.label); }) .attr("class", "slice"); slice .transition().duration(1000) .attrTween("d", function(d) { this._current = this._current || d; var interpolate = d3.interpolate(this._current, d); this._current = interpolate(0); return function(t) { return arc(interpolate(t)); }; }) slice.exit() .remove(); /* ------- TEXT LABELS -------*/ var text = svg.select(".labels").selectAll("text") .data(pie(data), key); text.enter() .append("text") .attr("dy", ".35em") .text(function(d) { return d.data.label; }); function midAngle(d){ return d.startAngle + (d.endAngle - d.startAngle)/2; } text.transition().duration(1000) .attrTween("transform", function(d) { this._current = this._current || d; var interpolate = d3.interpolate(this._current, d); this._current = interpolate(0); return function(t) { var d2 = interpolate(t); var pos = outerArc.centroid(d2); pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1); return "translate("+ pos +")"; }; }) .styleTween("text-anchor", function(d){ this._current = this._current || d; var interpolate = d3.interpolate(this._current, d); this._current = interpolate(0); return function(t) { var d2 = interpolate(t); return midAngle(d2) < Math.PI ? "start":"end"; }; }); text.exit() .remove(); /* ------- SLICE TO TEXT POLYLINES -------*/ var polyline = svg.select(".lines").selectAll("polyline") .data(pie(data), key); polyline.enter() .append("polyline"); polyline.transition().duration(1000) .attrTween("points", function(d){ this._current = this._current || d; var interpolate = d3.interpolate(this._current, d); this._current = interpolate(0); return function(t) { var d2 = interpolate(t); var pos = outerArc.centroid(d2); pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1); return [arc.centroid(d2), outerArc.centroid(d2), pos]; }; }); polyline.exit() .remove(); };