摘要：
本文作为可视化框架设计的一系列文章的序，介绍了数据可视化的概念，和发展阶段，为什么要开发可视化框架G2。 阅读全文
摘要：
简介：每个前端都有一个Chart梦，至于真正去做的寥寥无几，无怪乎几个原因：浏览器兼容问题数据处理的一些算法，如自动计算坐标轴、自动排列文本等流畅的动画丰富的交互功能去年一年的时间里，我一直在维护和丰富BUI控件库，由于缺少Chart，一直感觉不踏实，项目过程中由于Highchart收费，只能使用raphael做些临时的图表，复用性很差，最终头脑一冲动就基于Raphael模仿Highchart把整个Chart图表写了一遍，经过了2个多月的煎熬，终于能提供给大家使用，无论是否使用，欢迎来捧个场。图形分类实现了以下图表：折线图曲线图区域图、区域层叠图、百分比区域层叠图柱状图、柱状层叠图、百分比柱状 阅读全文
摘要：
简介：当我们在表格、列表中显示大量数据时，如果还需要对数据进行增删改、排序等处理时，直接操纵控件的DOM是非常繁琐和麻烦的事情，考虑一下场景：表格中添加一条记录对表格中的记录的某些字段进行编辑把记录按照Id排序上面这些操作都是非常常见的操作，但是这其中牵扯到不少琐碎的事情：操纵记录对应的DOM，在表格中创建大量的输入框更改数据，通过表单提交数据。把修改结果发送给后台把DOM进行排序等等操作这样处理的话，成本会非常大，我们仔细分析一下，从MVC的模式出发：l DOM 和样式，是Viewl 数据源是Modell 控件的控制逻辑是 Controll我们说对View的所有的控制都是通过Controll 阅读全文
摘要：
简介一个菜单有多个菜单项，一个列表有多个列表项，这是一类控件包含多个相同子项场景。这类控件有很多共有的特性，所以我们需要进行抽象和总结，来形成统一的功能和接口。根据子项的实现方式我们分为2种：子项实现为子控件子项仅作为控件的DOM片段这2种实现方式的主要差别在于：渲染DOM方面，1) 子项实现为控件，渲染DOM的逻辑是独立的，不受父控件控制的2) DOM片段，需要控件处理所有的子项的渲染逻辑 2.状态改变和事件触发方面：1) 子项实现为控件，状态的改变逻辑和事件触发由子控件处理，如果影响到其他的子控件，由父控件统一处理，例如选中一项时，父类会清理其他选中的子控件的选中状态。2) DO... 阅读全文
摘要：
简介很多控件需要进行定位，显示在页面的具体位置上，或者显示在于其他DOM对齐的位置（上下左右）上，这是控件拥有的特性，是典型的 Has-A关系，所以我们将其实现成2个扩展：Position： 控件位置相关的扩展Align：控件跟其他元素对齐的扩展位置控件在页面上的位置是指控件相对于页面坐标（0,0）的位置，我们用（x,y）来标示：我们这里用offset来标示DOM节点在页面上的相对位置，jQuery中 $().offset()既可以求出，具体计算offset 的算法这里就不介绍了。offset.left 控件的 x 坐标offset.top 控件的 y 坐标计算和设置控件的位置比较简单需要的属 阅读全文
摘要：
简介前面讲过JS代码中如何实现模板，我们在实现控件的时候，每个控件初始化时都需要有默认的html，如果这些html都是固定的，那么当需求发生变化或者用到其他项目时，这个控件的迁移成本就会非常大，所以我们在设计控件的时候，就应该分析那些地方应该使用模板。分析控件有自己的生命周期，控件上显示的html和CSS一般情况下：初始化时创建状态发生改变时变化本文关注的是控件初始化创建控件DOM时需要的模板，以及模板跟初始化传入变量之间的关系。控件的生命周期，前面曾经讲过，跟本文相关的是 createDom 和 renderUIcreateDom 就是控件创建自己的DOM结构renderUI 是控件根据一些 阅读全文
摘要：
简介我们在实现控件：列表、菜单、表格、日期选择等控件时，都需要实现选中效果，常见的选中行为有选中一条记录，清除其他选中（单选）选中一条记录不影响其他记录选中（多选）分析当我们去分析这些控件的实现代码时，发现选中的逻辑是几乎完全一样的，那么我们能不能把他们提取出来，这里也有2中方式：继承：提供公用的基类，所有这些控件继承有选中功能的基类扩展：实现一个扩展类，所有需要实现选中效果的类可以去引入这个扩展扩展和继承的差异在前面的博客里有论述，感兴趣的可以去查看。通过对比我们可以找到使用扩展的很多好处耦合小，在一个控件的实现过程中不考虑选中，仅在扩展中实现。使用灵活，当一个控件的父类不需要有选中效果是， 阅读全文
摘要：
概述我们在使用JS渲染DOM时，一般使用字符串创建DOM然后附加到父元素上，如果附加的DOM是动态易变的，那需要在函数中写大量逻辑。如果在控件实现过程中，这带来的问题更为严重。解决这个问题的常见解决方案是是使用模板，作为配置项传入控件，实现数据和渲染的分离。具体的实现方法有以下方法：字符串替换，使用正则匹配将数据替换进字符串中。渲染函数，函数返回字符串。模板引擎，可以将执行字符串中的函数（内置或者自定义的）替换（Substitute）字符串替换是最简单的实现模板的方式，看一下具体的实现：1. 定义替换函数/** * 替换字符串中的字段. * @param {String} str 模版字符串 阅读全文