新浪博客怎么给自己网站做链接吗/宁波seo搜索引擎优化公司

今天分享下个canvas的应用：饼状图效果以及对应列表展示。这个在我们做数据分析的时候经常会用到，这里我们弄个简单的DEMO，供大家参考学习。看下效果：

具体的DEMO：html>

canvas应用：饼状图效果以及对应列表展示 - Web前端之家https://www.jiangweishan.com/

let data = [

{ title: "Web前端之家1", money: 400 },

{ title: "Web前端之家2", money: 300 },

{ title: "Web前端之家3", money: 400 },

{ title: "Web前端之家4", money: 200 },

{ title: "Web前端之家5", money: 500 },

{ title: "Web前端之家6", money: 180 },

{ title: "Web前端之家7", money: 500 }]

/** @type {HTMLCanvasElement} */

let canvas = document.querySelector("#canvas");

let ctx = canvas.getContext("2d");

let r = 100;

let money = function (obj, sum) {

for (let i = 0; i 

sum += data[i].money

}

return sum;

}

let totalmoney = money(data, 0);

let nowsum = 0;

let start = 0;

let end = 0;

let R = 100;

let i=0;

data.forEach(function (item) {

ctx.beginPath()

nowsum += item.money;

end = (nowsum / totalmoney)

ctx.moveTo(150, 150);

ctx.arc(150, 150, R, start*Math.PI*2, end*Math.PI*2)

start = end;

//产生随机颜色

ctx.fillStyle = '#' + Math.floor(Math.random() * 0xffffff).toString(16);

ctx.rect(350,5+(35*i),30,30);

ctx.font="14px 黑体"

ctx.fillText(item.title,400,25+(35*i))

ctx.strokeStyle = "gray"

ctx.fill();

ctx.stroke();

i++;

})