JavaScript如何绘制饼图？
发布时间：2022-04-07 15:44:43 所属栏目：语言 来源：互联网
导读：饼图在做统计的时候是比较常见，能够形象的展示每个部分所占比例，那么用代码要怎么实现呢？下面小编就给大家分享关于使用JS实现饼图绘制效果的代码，下图是实现效果，感兴趣的朋友可以参考。 实现代码 JavaScript var canvas = document.getElementById(myc
|
饼图在做统计的时候是比较常见，能够形象的展示每个部分所占比例，那么用代码要怎么实现呢？下面小编就给大家分享关于使用JS实现饼图绘制效果的代码，下图是实现效果，感兴趣的朋友可以参考。 实现代码 JavaScript var canvas = document.getElementById("mycanvas"); var w = window.innerWidth; var h = window.innerHeight; canvas.height = 1000; canvas.width = 1400; var ctx = canvas.getContext('2d'); var poppable = true; var slices = []; function shadeColor(color, percent) { var f = parseInt(color.slice(1), 16), t = percent < 0 ? 0 : 255, p = percent < 0 ? percent * -1 : percent, R = f >> 16, G = f >> 8 & 0x00FF, B = f & 0x0000FF; return "#" + (0x1000000 + (Math.round((t - R) * p) + R) * 0x10000 + (Math.round((t - G) * p) + G) * 0x100 + (Math.round((t - B) * p) + B)).toString(16).slice(1); } function pieSlice(oX, oY, r, pos, len, col,data) { this.data = data this.originX = oX; this.originY = oY; this.radius = r; this.startingRadian = pos; this.length = len; this.color = col; this.highlightedColor = shadeColor(this.color, .6); this.highlighted = false; this.popped = false; this.animationFrame = 0; function setColor(c) { this.color = c; } } pieSlice.prototype.displayData = function(){ ctx.fillStyle= this.color; ctx.fillRect(this.originX - this.radius - 40, this.originY-this.radius-35, 25,25); ctx.fillStyle= "white"; ctx.font = "15px Arial"; ctx.fillText(this.data, this.originX - this.radius - 10, this.originY - this.radius - 18); } pieSlice.prototype.render = function() { if (!this.highlighted) { ctx.fillStyle = this.color; ctx.strokeStyle = this.color; } else { if(!this.popped && poppable){ this.displayData(); } // ctx.fillStyle = this.color; ctx.fillStyle = this.highlightedColor; ctx.strokeStyle = this.color; } //PIE ONE var pie = new pieSlice(700, 170, 125, 0, Math.PI / 4, "#FFD1DC", 12); var slice2 = new pieSlice(700, 170, 125, Math.PI / 4, Math.PI / 4, "#08E8DE"); var slice3 = new pieSlice(700, 170, 125, Math.PI / 2, Math.PI / 4, "#6699CC"); var slice4 = new pieSlice(700, 170, 125, 3 * Math.PI / 4, Math.PI, "#ADD8E6"); var slice5 = new pieSlice(700, 170, 125, 7 * Math.PI / 4, Math.PI / 4, "#B19CD9"); var slices1 = [pie, slice2, slice3, slice4, slice5]; （编辑：南通站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
