准备开发一个基于canvas的图表库，记录一些东西（一）
2024-10-25 16:20:33 来源: 阅读:
开源的图表库已经有很多了，这里从头写个自己的，主要还是 提高自己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);