当前位置：网站首页>canvas--饼状图

canvas--饼状图

2022-08-02 03:22:00 【cjx177187】

<body>

<style>

#box {

border: 1px solid black;

}

</style>

var canvas = document.querySelector("#box")

var pen = canvas.getContext("2d")

var deg = Math.PI / 180

//假数据

var arr = [{

money: 8000

{

money: 1580

{

money: 5790

{

money: 4090

{

money: 2439

]

//总价

arr.tatol = 0

for (let i = 0; i < arr.length; i++) {

arr.tatol = arr.tatol + arr[i].money

}

var stardeg = 0

arr.forEach(el => {

pen.beginPath()

var r1 = 200

//随机颜色

var r = parseInt(Math.random() * 255)

var g = parseInt(Math.random() * 255)

var b = parseInt(Math.random() * 255)

pen.fillStyle = `rgb(${ r},${ g},${ b})`

//求出每个money的占比

var angle = (el.money / arr.tatol) * 360

//利用占比来画圆弧

pen.arc(300, 300, r1, stardeg * deg, (stardeg + angle) * deg)

//将圆弧与圆心相连接，形成扇形

pen.lineTo(300, 300)

//给每个扇形添加数组的name

var y1 = 300 + Math.sin((stardeg + angle) * deg-angle*deg/2 ) *( r1+30)

var x1 = 300 + Math.cos((stardeg + angle) * deg-angle*deg/2 ) * (r1+30)

pen.fillText(`${ el.name}`, x1, y1)

stardeg = stardeg + angle

pen.fill()

pen.stroke()

});

</script>

</body>

原网站

版权声明
本文为[cjx177187]所创，转载请带上原文链接，感谢
https://blog.csdn.net/cjx177187/article/details/125954254

当前位置：网站首页>canvas--饼状图

canvas--饼状图

边栏推荐

猜你喜欢

随机推荐