百度T7 課程 根據資料畫餅圖
阿新 • • 發佈:2018-12-10
// 畫個6 等分的餅圖 window.onload = function(){ var c1 = document.getElementById('c1') var ctx = c1.getContext('2d') var canvasWidth = ctx.canvas.width; var canvasHeigh = ctx.canvas.height; var num = 50; var everyRadian = 2* Math.PI /num; // 很簡單啊, 一,根據資料,進行計算出百分比,然後 var total = 0; var len = datas.length; datas.forEach(function(item,i){ total +=item; }) // 計算出每塊所需要的大小: var radians = []; datas.forEach(function(item,i){ // 百分比: var percent = item/total; radians.push(percent * 2 * Math.PI) }) // console.log(radians) // 然後就可以開畫了,就這麼簡單 var lastRadians = 0; ctx.moveTo(canvasWidth/2,canvasHeigh/2) for(let i = 0; i<len;i++){ ctx.beginPath() ctx.moveTo(canvasWidth/2,canvasHeigh/2) ctx.fillStyle=getRandomColor() ctx.arc(canvasWidth/2,canvasHeigh/2,200,lastRadians,radians[i],true) ctx.fill() lastRadians +=radians[i]; } }
畫是畫出來,可是有錯啊,
有些時候我們出錯了,這個時候,就考驗調BUg 的能力了!
最終就是一個引數寫錯了
ctx.arc(canvasWidth/2,canvasHeigh/2,200,lastRadians,lastRadians + radians[i],false)
大家可以除錯看下,就是倒數第二個引數,到此餅狀圖初步就搞定了