*/ onload = function() { var rc = new RadialChart(null,'50vmin',0,'red',null); document.body.appendChild(rc.ref); var p = new RadialPie(rc,225,30,'30°','limegreen'); var rc1 = new RadialChart(null,'15vmin'); document.body.appendChild(rc1.ref); var p0 = new RadialPie(rc1,-45,45,'45°','red'); var rc2 = new RadialChart(); document.body.appendChild(rc2.ref); var p1 = new RadialPie(rc2,45,120,'120°','limegreen'); var p2 = new RadialPie(rc2,165,120,'120°','royalblue'); var p3 = new RadialPie(rc2,285,120,'120°','orange'); // console.log('====='); var rc3 = new RadialChart([1,1,1]); document.body.appendChild(rc3.ref); var rc4 = new RadialChart([1,2,4,1,1,3,2,3,3,1,4],'80vmin'); document.body.appendChild(rc4.ref); var rc5 = new RadialChart([1,2,1,1]); document.body.appendChild(rc5.ref); var rc6 = new RadialChart([1,2,1,3,1]); document.body.appendChild(rc6.ref); var rc7 = new RadialChart([1,2,1,1,2,3]); document.body.appendChild(rc7.ref); var rc8 = new RadialChart([1,2,1,3,1,4,2]); document.body.appendChild(rc8.ref); var rc9 = new RadialChart([3,1,2,1,1,2,3,2]); document.body.appendChild(rc9.ref); var rc0 = new RadialChart([2,3,1,2,1,1,2,1,3]); document.body.appendChild(rc0.ref); }; function RadialChart(data,size,angle,bgcolor,bgcolors) { // console.log(data+' '+Array.isArray(data)); this.bgcolors = bgcolors || [ // 'limegreen','cyan','royalblue','magenta','orange','yellow' 'limegreen','cyan','royalblue','purple','red','magenta','pink','orange','yellow' ]; // this.data = Array.isArray(data) ? data : []; this.data = data || []; this.ref = document.createElement('div'); this.ref.className = 'radial-chart'; this.ref.style.background = bgcolor || 'white'; if (size) { this.ref.style.width = size; this.ref.style.height = size; } this.pies = []; var w, a = angle || 0, s = 0, n = this.data.length, i = n, c = this.bgcolors.length; if (n==c+1) { c++; this.bgcolors.push('transparent'); } while (i--) s += this.data[i]; if (!s) return; a -= 180*this.data[0]/s; for (i=0; i

JS radial chart