准备开发一个基于canvas的图表库，记录一些东西（一）

开源的图表库已经有很多了，这里从头写个自己的，主要还是提高自己js的水平，增加复杂代码组织的经验

首先写一个画图的库，供以后画图表使用。经过2天的开发，算是能拿出点东西了，虽然功能还很弱，但是有了一些基本的架子。写了两个examples，发在了github上

下面分析一下第二个例子的代码，第二个例子效果大致如下图

看一下代码（请自行右键点击查看），很简短，

先是做一些配置

   1:              var render = new exports.Render();

   2:              render.register("lines",exports.Lines);

   3:              render.register("circles",exports.Circles)

   4:              var ctx = document.getElementById("myCanvas").getContext("2d");

   5:              var board = new exports.CanvasBoard({"ctx":ctx});

准备数据并画图，先是横着的5根线

   1:             render.lines("hGrid")

   2:                  .data({x1:50,x2:750},function(d,i){

   3:                          d.y1 = d.y2 = (i+1)*100;

   4:                          return d;

   5:                      },5)

   6:                  .style({strokeStyle:"blue"})

   7:                  .draw(board);

如果以前接触过 d3 这个库的话，应该看着很眼熟。的确是借鉴了d3的风格，不过我没仔细研究过d3的代码，完全是自己根据api的样子捉摸出来的。

1. lines 是通过render.register 注册进render的，见一段代码的第2行

2.data 函数的定义是 funciton data (data, f,num),他的规则比较复杂，

当data 是数组时

num实际不起作用
如果f 不是函数，那么lines 将构建data.length 个Line 对象，每一个Line对象的属性是相应data[i]的一份深拷贝 ;

如果f是函数,那么lines 将构建data.length 个Line 对象,每个Line对象是执行 f( data[i], i ) 的结果。此时需要自定义函数function(d,i){},d 是相应data[i]的深拷贝，可以在函数里面更改d，不会影响data本身，i是基于0的索引。最后需要return d 。对于 Line对象，为了作图，应该至少提供x1，y1, x2, y2四个属性

当data 不是数组，是一个对象时

如果不指定num，num为1.
如果f 不是函数,lines 将构建num 个Line对象，line对象的属性和data 一样；

如果f是函数，lines 将构建num个Line对象，line对象的属性是执行了 f(d,i)后的结果。此时每个d的属性是一样的，i从0 到 num - 1

对于 Line对象，为了作图，应该至少提供x1，y1, x2, y2四个属性

有点复杂，这是我纠结了半天确定下来的，的确可以提高效率。上面画横线的情况，对应对 data 是Object，f是函数，num=5的情况

3.style 的函数第一 function style(sty,f) ,整体思路和data一致，对lines中的每个对象设置style。这些style属性用来控制canvas 绘图，比如strokeStyle、lineWidth属性，这里每个线段的样式是一样的，所以就简单的传个对象就行了

4 draw函数，画图，需要传一个画板对象，这里是CanvasBoard的一个实例

画7根竖线

   1:              render.lines("vGrid")

   2:                  .data({y1:50,y2:550},function(d,i){

   3:                          d.x1 = d.x2 = (i+1)*100;

   4:                          return d;

   5:                      },7)

   6:                  .style({strokeStyle:"blue"})

   7:                  .draw(board);

这代码和上面一样。

随机画100个圆

   1:              var data = [];

   2:              for(var i = 0;i<100;i++){

   3:                  data.push({x:Math.random()*700+50,y:Math.random()*500+50,r:10});

   4:              }

   5:              render.circles("random point")

   6:                  .data(data)

   7:                  .style({fillStyle:"red"})

   8:                  .draw(board);

这里先把数据完全准备好，然后传进去就行。

当然也可以用下面这种等价的方式，也是推荐的方式，不过一般情况下，可能要适应一段时间

   1:              render.circles("random point")

   2:                  .data({r:10},function(d,i){

   3:                           d.x = Math.random()*700+50;

   4:                           d.y = Math.random()*500+50;

   5:                           return d;

   6:                      },100)

   7:                  .style({fillStyle:"red"})

   8:                  .draw(board);