<script type="text/javascript" src="/js/raphael/raphael-min.js" charset="utf-8"></script>
<script type="text/javascript" src="/js/raphael/plugin/g.raphael-min.js" charset="utf-8"></script>
<script type="text/javascript" src="/js/raphael/plugin/g.pie.js" charset="utf-8"></script>
<style>
#holder,#holder2 {
width: 280px;
height: 280px;
}
</style>
<script>
window.onload = function () {
var r = Raphael("holder",280,280);
r.piechart(140, 140, 140, [55, 20, 13, 32, 5, 1, 2, 10]);
//第一・第二引数は中心点の座標、第三引数は半径
//第四引数はパーセントではなく値をいれる
var r2 = Raphael("holder2",280,280);
pie = r2.piechart(200, 160, 80, [55, 32, 20, 13, 5, 1, 2, 10],{ legend: ["%%.%% - value1","value2","value3"], legendpos: "west", href: ["test1", "test2"]});
//第一・第二引数は中心点の座標、第三引数は半径
//第五引数のlegendは降順に命名しないとならない模様。legendposは東西南北。hrefはtitle表示。
pie.hover(function () {
this.sector.stop();
this.sector.scale(1.1, 1.1, this.cx, this.cy);
if (this.label) {
this.label[0].stop();
this.label[0].attr({ r: 7.5 });
this.label[1].attr({ "font-weight": 800 });
}
}, function () {
this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
if (this.label) {
this.label[0].animate({ r: 5 }, 500, "bounce");
this.label[1].attr({ "font-weight": 400 });
}
});
};
</script>
<h1>SVGで描画</h1>
<div class="desc">シンプルな円グラフ値を入れるだけで作成可能。<br>Raphael.JSというライブラリを利用しています。</div>
<div id="holder"></div>
<h1>SVGで描画２</h1>
<div class="desc">Raphael.JSを使った応用。<br>値やパーセントの表示、マウスアクションも可能。</div>
<div id="holder2"></div>
<script src="/js/lib/html5/Chart/Chart.js"></script>
<script>
$(document).ready(function(){
//Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart").getContext("2d");
var data = [
{
value: 30,
color:"#F38630"
},
{
value : 50,
color : "#E0E4CC"
},
{
value : 100,
color : "#69D2E7"
}
]
new Chart(ctx).Pie(data);
});
</script>
<h1>canvasで描画</h1>
<div class="desc">Chart.jsライブラリを使ったパイ型チャート</div>
<canvas id="myChart" width="320" height="250"></canvas>
<script src="/js/lib/html5/Chart/Chart.js"></script>
<script>
$(document).ready(function(){
//Get the context of the canvas element we want to select
var ctx2 = document.getElementById("doughnut").getContext("2d");
var data2 = [
{
value: 30,
color:"#F38630"
},
{
value : 50,
color : "#E0E4CC"
},
{
value : 100,
color : "#69D2E7"
}
]
new Chart(ctx2).Doughnut(data2);
});
</script>
<h1>canvasで描画</h1>
<div class="desc">Chart.jsライブラリを使ったドーナツ型チャート</div>
<canvas id="doughnut" width="320" height="250"></canvas>