建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
純HTML5Canvas實(shí)現(xiàn)的餅圖
基本思路：
創(chuàng)新互聯(lián)長(zhǎng)期為上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為新?lián)崞髽I(yè)提供專業(yè)的成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)，新?lián)峋W(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
主要是利用HTML5 Canvas實(shí)現(xiàn)餅圖繪制，繪制弧度的API主要是使用
context.arc與lineto兩個(gè)API。
實(shí)現(xiàn)的功能有：
1. 支持標(biāo)簽Legend顯示或者隱藏
2. 首次載入動(dòng)畫效果
3. 鼠標(biāo)tooltip效果
4. 自定義餅圖大小與是否添加文字
效果如下：
調(diào)用代碼：
My Demo 1 Pie Chart Demo
餅圖JS的代碼：
var pieChart = { width: 600, height: 400, series: [], unit: "kg", chartCanvas: null, selectable : true, title: "Pie Chart", legend : { enable : true }, edge : { width: 50, height: 50 }, animation: { enable: true, animCanvas : null, hh: 1, // trick is here!! for animation play pctx: null }, tooltips: { enable: true, tooltipCanvas : null, ttContext: null, index: -1 }, circle : { cx: 0, cy: 0, radius: 0 }, text : { enable: false, content:[] }, initSettings: function (config) { this.chartCanvas = config.canvas; this.chartCanvas.width = config.width; this.chartCanvas.height = config.height; this.width = config.width; this.height = config.height; this.series = config.series; this.title = config.title; this.unit = config.unit; if(config.tooltips != undefined) { this.tooltips.enable = config.tooltips.enable; } if(config.animation != undefined) { this.animation.enable = config.animation.enable; } if(config.legend != undefined) { this.legend.enable = config.legend.enable; } if(config.text != undefined) { this.text.enable = config.text.enable; } }, render : function() { // initialization circle this.circle.cx = this.width/2; this.circle.cy = this.height/2; this.circle.radius = Math.min(this.width/2, this.height/2) - Math.max(this.edge.width, this.edge.height); var ctx = null; if(this.animation.enable) { this.animation.animCanvas = document.createElement("canvas"); this.animation.animCanvas.width = this.width; this.animation.animCanvas.height = this.height; ctx = this.animation.animCanvas.getContext("2d"); } else { ctx = this.chartCanvas.getContext("2d"); this.renderBorder(ctx); } if(this.circle.radius <= 0) { ctx.strokeText("Can not reader the chart, Circle is too small."); return; } // draw each arc according to data series var sum = 0; var nums = this.series.length; for(var i=0; i this.width) { loc.x = loc.x - this.tooltips.tooltipCanvas.width; } if((loc.y - this.tooltips.tooltipCanvas.height) <= 0) { loc.y = loc.y + this.tooltips.tooltipCanvas.height; } ctx.drawImage(this.tooltips.tooltipCanvas, 0, 0, this.tooltips.tooltipCanvas.width, this.tooltips.tooltipCanvas.height, loc.x, loc.y-this.tooltips.tooltipCanvas.height, this.tooltips.tooltipCanvas.width, this.tooltips.tooltipCanvas.height); } else { this.tooltips.index = -1; this.clearTooltips(ctx); } }, clearTooltips : function(ctx) { ctx.clearRect(0,0,this.width, this.height); this.renderBorder(ctx); ctx.drawImage(this.animation.animCanvas, 0, 0, this.width, this.height, 0, 0, this.width, this.height); }, renderBorder : function(ctx) { ctx.save(); ctx.fillStyle="white"; ctx.strokeStyle="black"; ctx.fillRect(0, 0, this.width, this.height); ctx.strokeRect(0, 0, this.width, this.height); ctx.restore(); }, renderPie : function(ctx, index, precent, deltaArc) { var endAngle = deltaArc + 2*Math.PI*precent; ctx.beginPath(); ctx.arc(this.circle.cx, this.circle.cy, this.circle.radius, deltaArc, endAngle, false); ctx.moveTo(this.circle.cx, this.circle.cy); ctx.lineTo(this.circle.cx + this.circle.radius * Math.cos(deltaArc), this.circle.cy + this.circle.radius * Math.sin(deltaArc)); ctx.lineTo(this.circle.cx + this.circle.radius * Math.cos(endAngle), this.circle.cy + this.circle.radius * Math.sin(endAngle)); ctx.lineTo(this.circle.cx, this.circle.cy); ctx.closePath(); ctx.fillStyle = this.series[index].color; ctx.fill(); // render text content if(this.text.enable) { var halfEndAngle = deltaArc + Math.PI*precent; var hx = this.circle.cx + this.circle.radius * Math.cos(halfEndAngle); var hy = this.circle.cy + this.circle.radius * Math.sin(halfEndAngle); ctx.beginPath(); ctx.moveTo(hx, hy); var linePos = (hx < this.circle.cx) ? (hx - this.edge.width) : (hx + this.edge.width); ctx.lineTo(linePos, hy); ctx.closePath(); ctx.strokeStyle="black"; ctx.stroke(); var textPos = (hx < this.circle.cx) ? (hx - this.edge.width*2) : (hx + this.edge.width); precent = Math.round (precent*100) / 100; var size = this.text.content.length; var tipStr = (size > index) ? this.text.content[index] : this.series[index].name + ": " + (precent * 100).toFixed(0) + "%"; ctx.font = '10pt Calibri'; ctx.fillStyle="black"; ctx.fillText(tipStr, textPos, hy); } }, renderLegend : function(ctx, sum) { if(!this.legend.enable) return; var nums = this.series.length; ctx.font = '10pt Calibri'; var pos = (this.width/2 > (this.circle.radius+50)) ? 50 : (this.circle.cx - this.circle.radius); for(var i=0; i源代碼可以直接使用
網(wǎng)頁(yè)名稱：純HTML5Canvas實(shí)現(xiàn)的餅圖
網(wǎng)頁(yè)網(wǎng)址：http://www.dlmjj.cn/article/jhhdsh.html
