147 lines
3.2 KiB
HTML
147 lines
3.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
|
||
|
|
</head>
|
||
|
|
<style>
|
||
|
|
#piecenter {
|
||
|
|
width: 120px;
|
||
|
|
height: 120px;
|
||
|
|
width: 25%;
|
||
|
|
height: 25%;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<body>
|
||
|
|
<container>
|
||
|
|
<div class="columns">
|
||
|
|
<div class="column is-half">
|
||
|
|
<div class="content">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="column is-half">
|
||
|
|
<div class="widget" id="piecenter">
|
||
|
|
<div id="chart" class="chart-container">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
</container>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const dataset = {{ dataset|safe }}
|
||
|
|
|
||
|
|
var pie=d3.layout.pie()
|
||
|
|
.value(function(d){return d.percent})
|
||
|
|
.sort(null)
|
||
|
|
.padAngle(.03);
|
||
|
|
|
||
|
|
var w=350,h=350;
|
||
|
|
|
||
|
|
var outerRadius=w/2;
|
||
|
|
var innerRadius=100;
|
||
|
|
|
||
|
|
var color = d3.scale.category20();
|
||
|
|
|
||
|
|
var arc=d3.svg.arc()
|
||
|
|
.outerRadius(outerRadius)
|
||
|
|
.innerRadius(innerRadius);
|
||
|
|
|
||
|
|
var svg=d3.select("#chart")
|
||
|
|
.append("svg")
|
||
|
|
.attr({
|
||
|
|
width:w,
|
||
|
|
height:h,
|
||
|
|
class:'shadow'
|
||
|
|
}).append('g')
|
||
|
|
.attr({
|
||
|
|
transform:'translate('+w/2+','+h/2+')'
|
||
|
|
});
|
||
|
|
var path=svg.selectAll('path')
|
||
|
|
.data(pie(dataset))
|
||
|
|
.enter()
|
||
|
|
.append('path')
|
||
|
|
.attr({
|
||
|
|
d:arc,
|
||
|
|
fill:function(d,i){
|
||
|
|
return color(d.data.name);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
path.transition()
|
||
|
|
.duration(1000)
|
||
|
|
.attrTween('d', function(d) {
|
||
|
|
var interpolate = d3.interpolate({startAngle: 0, endAngle: 0}, d);
|
||
|
|
return function(t) {
|
||
|
|
return arc(interpolate(t));
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
var restOfTheData=function(){
|
||
|
|
var text=svg.selectAll('text')
|
||
|
|
.data(pie(dataset))
|
||
|
|
.enter()
|
||
|
|
.append("text")
|
||
|
|
.transition()
|
||
|
|
.duration(200)
|
||
|
|
.attr("transform", function (d) {
|
||
|
|
return "translate(" + arc.centroid(d) + ")";
|
||
|
|
})
|
||
|
|
.attr("dy", ".4em")
|
||
|
|
.attr("text-anchor", "middle")
|
||
|
|
.text(function(d){
|
||
|
|
return d.data.percent+"%";
|
||
|
|
})
|
||
|
|
.style({
|
||
|
|
fill:'#1e1b1b',
|
||
|
|
'font-size':'14px'
|
||
|
|
});
|
||
|
|
|
||
|
|
var legendRectSize=20;
|
||
|
|
var legendSpacing=7;
|
||
|
|
var legendHeight=legendRectSize+legendSpacing;
|
||
|
|
|
||
|
|
|
||
|
|
var legend=svg.selectAll('.legend')
|
||
|
|
.data(color.domain())
|
||
|
|
.enter()
|
||
|
|
.append('g')
|
||
|
|
.attr({
|
||
|
|
class:'legend',
|
||
|
|
transform:function(d,i){
|
||
|
|
//Just a calculation for x & y position
|
||
|
|
return 'translate(-35,' + ((i*legendHeight)-65) + ')';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
legend.append('rect')
|
||
|
|
.attr({
|
||
|
|
width:legendRectSize,
|
||
|
|
height:legendRectSize,
|
||
|
|
rx:20,
|
||
|
|
ry:20
|
||
|
|
})
|
||
|
|
.style({
|
||
|
|
fill:color,
|
||
|
|
stroke:color
|
||
|
|
});
|
||
|
|
|
||
|
|
legend.append('text')
|
||
|
|
.attr({
|
||
|
|
x:30,
|
||
|
|
y:15
|
||
|
|
})
|
||
|
|
.text(function(d){
|
||
|
|
return d;
|
||
|
|
}).style({
|
||
|
|
fill:'#929DAF',
|
||
|
|
'font-size':'18px'
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
setTimeout(restOfTheData,1000);
|
||
|
|
</script>
|
||
|
|
</body>
|