生活随笔
收集整理的這篇文章主要介紹了
小程序实现圆饼图
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
效果圖
預(yù)備知識(shí)
CanvasContext.createCircularGradient(number x, number y, number r) Canvas的基本繪制API 實(shí)現(xiàn)代碼
注意：arc()函數(shù)中表示角的單位是弧度，不是角度。角度與弧度的js表達(dá)式:
function drawPie
( canvas, anglesArray, circular, percent
) { //畫(huà)出餅狀圖var ctx
= canvas
; //顏色列表const color
= [ { start:
'rgb(76, 197, 255)' , end:
'rgb(81, 122, 255)' } ,
{ start:
'rgb(38, 236, 161)' , end:
'rgb(12, 182, 224)' } ,
{ start:
'rgb(255, 115, 137)' , end:
'rgb(230, 75, 161)' } ] for ( let i
= 0
; i
< anglesArray.length
; i++
) { let startAngle
; let endAngle
; if ( i
== 0
) { startAngle
= transformAngle
( 0
) ; endAngle
= transformAngle
( anglesArray
[ i
] - 1
) ; } else { let start
= 0
; for ( let j
= 0
; j
< i
; j++
) { start +
= anglesArray
[ j
] ; } startAngle
= transformAngle
( start
) ; endAngle
= transformAngle
( start + anglesArray
[ i
] - 1
) ; } ctx.beginPath
( ) ; ctx.arc
( circular.x, circular.y, circular.radius, startAngle, endAngle
) ; ctx.lineTo
( circular.x, circular.y
) ; ctx.closePath
( ) ; //填充漸變色
let gra
= ctx.createCircularGradient
( circular.x, circular.y, circular.radius
) ; gra.addColorStop
( 0, color
[ i
] .start
) gra.addColorStop
( 1, color
[ i
] .end
) ; ctx.setFillStyle
( gra
) ctx.fill
( ) ; } //繪制中間的空白圓ctx.beginPath
( ) ; ctx.arc
( circular.x, circular.y, circular.radius * percent, 0, 360
) ; ctx.fillStyle
= "white" ; ctx.fill
( ) ; ctx.draw
( ) ;
}
function transformAngle
( angle
) { //計(jì)算弧度
return ( Math.PI / 180
) * angle
}
總結(jié)
以上是生活随笔 為你收集整理的小程序实现圆饼图 的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔 網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔 推薦給好友。
