Hot For Coding
Canvas画饼图!

近来比较忙,有点无暇顾忌小站了!于是忙里偷闲,把项目中的收获记录下来,方便他人,提升自己!

饼图

饼图,大家都应该熟知,在统计数据对比方面,几乎处处用到。如cnzz的统计饼图

full

从饼图中,很形象地展示了访问者地区的分布,以扇形为块的方式拼成一个大圆。

都使用什么方法实现

目前众多站点制作饼图大多使用Flash,或者服务器端生成,如C++、PHP、Python、Java等等,只要安装相应的基础库就能实现画图。但很少有站点这么干,因为耗费服务器资源。

cnzz里使用的就是Flash

full

PHP生成的

full

Canvas也能画出饼图

HTML

<canvas id="pie"  width="224" height="130" ></canvas>

JavaScript

// 画饼图所用的颜色
var color = ["#999999", "#333333", "#336799"];

// 数据百分比,全部是数据加起来是100,才能画满整个圆
var data = [25, 35, 50];
 
function drawCircle(){
  var canvas = document.getElementById("pie");

  // 画2D平面图
  var ctx = canvas.getContext("2d");

  // 绘制方向起点,有逆顺之分,通常是 1.5*Math.PI 或者 0
  var startPoint= 1.5 * Math.PI;
  for (var i=0; i<data.length; i++) {

    // 设置填充颜色
    ctx.fillStyle = color[i];

    // 设置边框颜色
    ctx.strokeStyle = color[i];

    // 开始画
    ctx.beginPath();

    // 移动画笔
    ctx.moveTo(112, 65);

    // 画扇形函数
    ctx.arc(112, 65, 65, startPoint, startPoint - Math.PI * 2 * (data[i] / 100), true);

    // 填充颜色
    ctx.fill();

    // 绘制边框
    ctx.stroke();

    // 画完一个扇形以后,重新计算回到原点开始绘制下一扇,否则画出来的饼图拼起来就不是圆形了。
    startPoint -= Math.PI * 2 * (data[i] / 100);
  }
}

drawCircle();

Canvas是HTML5新增的画布标签,个人感觉这个标签在将来将大有用途,喜欢研究HTML5的童鞋可以深入研究这个标签

效果:

full

TITLE: Canvas画饼图!

LINK: https://www.qttc.net/255_canvas_make_pie_chart.html

NOTE: 转载内容请注明出处