准备开发一个基于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);
准备开发一个基于canvas的图表库,记录一些东西(一)的更多相关文章
- sChart.js:一个小型简单的图表库
介绍 sChart.js 作为一个小型简单的图表库,没有过多的图表类型,只包含了柱状图.折线图.饼状图和环形图四种基本的图表.麻雀虽小,五脏俱全.sChart.js 基本可以满足这四种图表的需求.而它 ...
- 【前端酷站】分享一个纯 Javascript 的图表库与立体像素风制作~
今天小编为大家推荐一个神奇的酷站.ECharts,一个纯 Javascript 的图表库. 以下是各个几个不错的界面的介绍: 首页:http://echarts.baidu.com/ 在首页有完整的说 ...
- Axios 是一个基于 promise 的 HTTP 库
Axios 是一个基于 promise 的 HTTP 库 vue项目中关于axios的简单使用 axios介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.j ...
- 用VSCode开发一个基于asp.net core 2.0/sql server linux(docker)/ng5/bs4的项目(1)
最近使用vscode比较多. 学习了一下如何在mac上使用vscode开发asp.netcore项目. 这里是我写的关于vscode的一篇文章: https://www.cnblogs.com/cgz ...
- Flutter ChartSpace:通过跨端 Canvas 实现图表库
基于Flutter 的图形语法库,通过跨端 Canvas ,将基于 Javascript 的图形语法库 ChartSpace 扩展至 Flutter 端 作者:字节跳动终端技术--胡珀 背景 数据平台 ...
- 使用webpack4搭建一个基于Vue的组件库
组内负责的几个项目都有一些一样的公共组件,所以就着手搭建了个公共组件开发脚手架,第一次开发 library,所以是参考着 iview 的配置来搭建的.记录如何使用webpack4搭建一个library ...
- 手把手做一个基于vue-cli的组件库(上篇)
基于vue-cli4的ui组件库,先贴个最终效果吧,步骤有点多,准备分上下篇,上篇:如何做一个初步的组件.下篇:编写说明文档及页面优化.开工. GitHub源码地址:https://github.co ...
- 开发一个基于 Android系统车载智能APP
很久之前就想做一个车载相关的app.需要实现如下功能: (1)每0.2秒更新一次当前车辆的最新速度值. (2)可控制性记录行驶里程. (3)不连接网络情况下获取当前车辆位置.如(北京市X区X路X号) ...
- 用VSCode开发一个基于asp.net core 2.0/sql server linux(docker)/ng5/bs4的项目(2)
第一部分: http://www.cnblogs.com/cgzl/p/8478993.html 为Domain Model添加约束 前一部分, 我们已经把数据库创建出来了. 那么我们先看看这个数据库 ...
随机推荐
- poj Candies
http://poj.org/problem?id=3159 #include<cstdio> #include<queue> #include<cstring> ...
- UNDO 100%
另外查了下v$undostat,发现begin_time已经很久没有改变, BEGIN_TIME END_TIME MAXQUERYLEN MAXCONCU ...
- NOIP
最近把历年题刷一下吧... 发现0几年的题不是爆搜就是高精度,恶心死了...直接跳过,做些有意思的... P1129产生数 floyed之后乘法原理统计 P1810导弹拦截 贪心,按距某个点的距离 ...
- vim插件
所需即所获:像 IDE 一样使用 vim https://github.com/yangyangwithgnu/use_vim_as_ide mark.vim http://www.vim.org/s ...
- 四种方法解析JSON数据
(1)使用TouchJSon解析方法:(需导入包:#import "TouchJson/JSON/CJSONDeserializer.h") //使用TouchJson来解析北京的 ...
- [置顶] 软件架构师的12项修炼_读书纪要_P3商务技能修炼
本系列的文章是我读书后的个人纪要(书摘),仅代表个人观点.如想了解更多相关内容,请购买正版物,支持原书作者.对应的图书可以从我的个人图书列表里找寻:个人毕业后图书列表 本书勾勒了软件架构师的必备技能的 ...
- X Window、GNOME和KDE之间的关系
原文地址:http://blog.csdn.net/jincf2011/article/details/6362923 X Window, 即X Windows图形用户接口,它并不是一个软件,而是一个 ...
- Java并发编程:线程和进程的创建(转)
Java并发编程:如何创建线程? 在前面一篇文章中已经讲述了在进程和线程的由来,今天就来讲一下在Java中如何创建线程,让线程去执行一个子任务.下面先讲述一下Java中的应用程序和进程相关的概念知识, ...
- OpenGL —— 基础笔记
1.基础博文 链接:http://blog.csdn.net/lotusone?viewmode=contents 2.绘制文字 链接:http://www.cnblogs.com/xia ...
- 零基础学习IOS开发(二)- 使用cocos2d-x3.0 执行Hello world
关于开发框架,依据网上检索来的信息,感觉cocos2d-x的ios游戏开发框架非常不错,并且有非常强的可移植性,因此打算尝试一下. 截止写下此文章,最新的cocos2d-x的版本号为v3.0稳定版(几 ...