继续编写“圳品”信息系统，除了要列出圳品清单，还需要做进一步的数据分析，比如按“圳品”所在区域进行统计和展示，这个之前已经实现（参见：在网页地图图片上加注企业和“圳品”数量信息），现在还需要对“圳品” 按类别进行统计和展示。为了让数据对比一目了然，我们打算用饼图来展示。
要在网页上绘制显示饼状图，有很多现成的库，比如 Echarts等，但我们想用HTML5中的 画布（Canvas）来自己画，这个在网上有很多的演示代码，拿来根据我们的需要进行修改。
我们首先定义一个“圳品”类别数组aType，如下：
const aType = [ "水果",//0 "粮食",//1,谷类、豆类、薯类 "食用油",//2 "饮用水",//3 "畜类",//4 "禽类",//5 "渔类",//6 "其它"//7 ];
包括水果、粮食、食用油、饮用水、畜、禽、渔、其它 8类。
再将“圳品”类别统计结果保存到数组aTypeCount ，如下：
//结构：类别，数量，颜色 var aTypeCount = [ [0, 3, "purple"], [1, 5, "gray"], [2,3, 'yellow'], [3,4,"green"], [4,8,"red"] ];
接下来我们定义Pie对象，并提供init、render、和drawText三个方法，分别实现数据初始化、渲染页面（画饼图）和输出文字说明。
然后把数组aTypeCount 的数据传递给Pie对象来绘制饼图。
完整的代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="Author" content="PurpleEndurer"> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>“圳品”信息系统</title> </head> <body> <script> const aType = [ "水果",//0 "粮食",//1,谷类、豆类、薯类 "食用油",//2 "饮用水",//3 "畜",//4 "禽",//5 "渔",//6 "其它"//7 ]; //结构： //类别，数量，颜色 var aTypeCount = [ [0, 3, "purple"], [1, 5, "gray"], [2,3, 'yellow'], [3,4,"green"], [4,8,"red"] ]; </script> <canvas id="typeCountCanvas" style="border:1px solid red"></canvas> <div> <textarea border="1" id="taDebug" cols="80" rows="15">debug：</textarea> </div> <script> var tcCanvas = document.getElementById("typeCountCanvas"); //var w = window.innerWidth; //var h = window.innerHeight; tcCanvas.height = 480; tcCanvas.width = 640; var ctx = tcCanvas.getContext('2d'); var taDbg = document.getElementById("taDebug"); function Pie(obj) { for(var key in obj) { this[key] = obj[key]; } this.init(); this.render(this.slice); this.drawText(); } Pie.prototype = { init: function () { this.start = 0; //1、累计数据求合 var sum = 0; this.data.forEach(function (v) { sum += v[1]; }); //2、计算每一个数据所占的比重 this.slice = this.data.map(function (v) { var obj = {}; obj.number = v[1]; obj.ratio = v[1] / sum;//每个数据占据的比重 obj.radian = 2 * Math.PI * v[1] / sum;//该扇形所占据的弧度 obj.start = this.start; obj.end = this.start + obj.radian; this.start = obj.end; obj.color = v[2]; obj.text = aType[v[0]] + "类"+ v[1] + "个，占比" + Math.ceil(obj.ratio*100) + "%"; return obj; },this); }, //渲染页面（画饼图） render: function (obj) { //3、计算每一个扇形的起始弧度和结束弧度 this.slice.forEach(function (v, i) { var obj = {}; //第一个扇形的起始弧度：start 结束：start+第一个扇形占据的弧度差 obj.start = this.start; obj.end = this.start + v.radian; this.start += v.radian; //绘制扇形 this.ctx.beginPath(); this.ctx.moveTo(this.x, this.y); this.ctx.arc(this.x, this.y, this.r, obj.start, obj.end); this.ctx.fillStyle = v.color; this.ctx.fill(); }, this); }, //输出文字说明 drawText:function(){ var fontSize= 16; this.ctx.font = fontSize+"px 微软雅黑"; this.slice.forEach(function(obj){ this.ctx.fillStyle = 'black'; //计算文字所在的弧度 r2 = obj.start + obj.radian/2; //计算相对于圆心文字偏移的位置 b = this.r * Math.cos(r2) ; h = this.r * Math.sin(r2); //文字的x坐标位置 var x2 = this.x + b; if (x2 <= this.x) { //在圆心的左侧 x2 = 10; } //文字的y坐标位置 var y2 = this.y + h; if (y2 >= this.y) { y2 += fontSize; } else { //在圆心的上方 y2 -= fontSize/2; } this.ctx.fillText(obj.text, x2, y2);//在一行输出 taDbg.value += "\nthis.r=" + this.r + " obj.text= " + obj.text + " x2=" + x2 + " y2=" + y2; },this); } }; var typeCountPie = new Pie({ ctx: ctx, x: tcCanvas.width / 2, y: tcCanvas.height / 2, r: 150, data:aTypeCount }); </script> </body> </html>
显示效果截图如下：
