46 lines
1.5 KiB
JavaScript
46 lines
1.5 KiB
JavaScript
|
console.log("test");
|
||
|
|
$(function() {
|
||
|
|
|
||
|
|
//var data = [{% for cat in categories %} {{ cat.sum_cat|escapejs }}, {% endfor %}];
|
||
|
|
//var data_cat = [{% for cat in categories %} "{{ cat.cat_name|escapejs }}", {% endfor %}];
|
||
|
|
var sum = 0;
|
||
|
|
for (var i=0; i < data.length; i++){sum += data[i]}
|
||
|
|
var r = 3.6;
|
||
|
|
var centerX = 180;
|
||
|
|
var centerY = 180;
|
||
|
|
var radius = 180;
|
||
|
|
var far = 108;
|
||
|
|
var start = (Math.PI/180)*0-Math.PI/2;
|
||
|
|
var colors = ['#5E35B1', '#43A047', '#E53935', '#1E88E5', '#D81B60', '#C0CA33', '#4e342e', '#00acc1', '#f9a825', '#546e7a', '#7b1fa2', '#689f38', '#ff6f00', '#6d4c41', '#3f51b5', '#00acc1'];
|
||
|
|
var canvas = document.getElementById('canvas');
|
||
|
|
var total = 0;
|
||
|
|
if (canvas.getContext){
|
||
|
|
var ctx = canvas.getContext('2d');
|
||
|
|
ctx.strokeStyle = '#fff';
|
||
|
|
ctx.lineWidth = 2;
|
||
|
|
ctx.lineCap = 'round';
|
||
|
|
ctx.lineJoin = 'bevel';
|
||
|
|
for (var i=0; i < data.length;i++) {
|
||
|
|
ctx.beginPath();
|
||
|
|
total += data[i]*100/sum;
|
||
|
|
var end = (Math.PI/180)*r*total-Math.PI/2;
|
||
|
|
ctx.arc(centerX,centerY,radius, start, end);
|
||
|
|
ctx.lineTo(centerX,centerY);
|
||
|
|
ctx.fillStyle = colors[i];
|
||
|
|
ctx.fill();
|
||
|
|
ctx.stroke();
|
||
|
|
ctx.fillStyle = "white";
|
||
|
|
ctx.font = "10pt calibri";
|
||
|
|
ctx.fillText(data_cat[i], centerX-15 + far * Math.cos((start + end) / 2), centerY + far * Math.sin((start + end) / 2));
|
||
|
|
start = end+0.01;
|
||
|
|
}
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.shadowBlur = 7;
|
||
|
|
ctx.shadowColor = "rgba(0, 0, 0, 0.2)";
|
||
|
|
ctx.arc(centerX,centerY,radius, 0, 2*Math.PI);
|
||
|
|
ctx.stroke();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
})
|