继续编写“圳品”信息系统，除了要列出圳品清单，还需要做进一步的数据分析，比如按“圳品”所在区域进行统计和展示，这个之前已经实现（参见：在网页地图图片上加注企业和“圳品”数量信息），现在还需要对“圳品” 按类别进行统计和展示。为了让数据对比一目了然，我们打算用饼图来展示。
要在网页上绘制显示饼状图，有很多现成的库，比如 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>
显示效果截图如下：
