chartx2.0 代码规范

配置使用规范约定

首先，chartx2.0 和之前的版本使用方式保持一致，需要有 dom 节点， data数据，和配置。

不同的是2.0中数据支持行列式的数据格式
```
var data = [
    [ "xfield", "uv", "pv" ],
    [ 1       ,  2  ,  3   ],
    [ 2       ,  3  ,  4   ]
]
```
同时也支持json格式列表
```
var data = [
   { xfield: 1, uv:2, pv:3  },
   { xfield: 1, uv:2, pv:3  },
   { xfield: 1, uv:2, pv:3  }
]
```
chartx会主动识别并且处理，只要符合其中一种数据格式，你就只管塞就好了。

然后，chartx2.0中所有的图标类型都会提供一份根据数据来得默认配置，也就是说，你可以只要有数据，不用些任何配置，就可以创建一个图表：
```
Chartx.Line( "dom" , data, {} ) 
//最后面的那个配置可以不要，Chartx.Line( "dom" , data )
//那么比如在直角坐标系中，我们会默认拿第一个字段xfield作为xAxis.field, 其他字段都作为yAxis.field
```
chartx2.0 相比1.xxx 更加纯粹的采用了组件式配置的原则，比如一个直角坐标系的折线图line，它的配置会是这样
```
//其中除开coordinate 和 graphs 默认会有以外，其他的所有 组件 都是组装式的，在options 里面组装了这个组件，才会有对应的功能，2.0里面包括tips也不再默认放出（ 这么多年的经验得出，默认的tips基本没有可看性，项目里面基本会对tips.content重构 ）
var options = {
    coordinate : {
        xAxis : {},
        yAxis : {}
    },
    graphs : {

    },
    legend : {

    },
    markLine : {

    },
    markPoint : {

    },
    dataZoom: {

    },
    tips : {

    }
}
```
- 图表类视图规划
  
  2.0中，把图表区按照坐标系类别分类，而不在是单独个图表类型，各自写各自的逻辑代码
  - Chart
    - Descartes(笛卡尔坐标系)
      - bar
      - line
      - bar_line
      - bar_tgi
      - scat
    - Polar(极坐标系)
      - Pie
      - Dingle（丁格尔玫瑰图）
      - Planet （星云图）
    - Other
- 接口约定规范
** chart 图表基类

1，这次添加了组件管理机制 components

2，然后，对于reset 和 resetData两个接口，这次做了绝对清晰的划分，也就是reset 实质上和重新绘制是一回事，而resetData却仅仅是数据的变化，然后调用各个组价的resetData 来实现整体数据的更新（之前版本里做的太复杂，reset会去计算用户reset的意图，比如reset里少了个yAxis的字段，那么就会自动remove掉一条线，这是个大坑，而且性价比非常低，但是代码量和可维护性非常低）

** descartes 笛卡尔系统类（ bar,line,scat 等都继承自该类）

简单代码约定规范

_coordinate 为实例 coordinate 为配置

交互事件的规范 1.xx 版本中，所有的事件都是在 chart.on("nodeclick") 等这样的层面实现的

2.0中，所有的事件都写入到配置中去

比如在scat中得节点点击事件

 graphs : [
       {
           type : "scat",
           field : "money",
           groupField : "sex",
           node : {
               r : "house", 

               //事件直接注册到对于的配置中来，这样，减少了命名的麻烦，统一的命名，而且直观, 
               //一眼就知道在那些元素上面注册了事件
               onclick : function( nodeData, Graphs ){
                   debugger
               }
           }
       }
   ]

file:../canvax

直角坐标系的两类轴（xAxis,yAxis）,和极坐标系的两类轴（aAxis,rAxis ），都至少有field和ruler ruler用来表示刻度ui，axis上面别的所有的属性都是逻辑属性，ruler用来控制是否有ui。

graphs 约定所有得graphs中把所有的ui设置都归为了4个属性（这么多年的经验来看，基本能满足目前为止的所有需求） node --》 (对应一个数据节点，而不是ui元素) line --》（多个数据节点的链接，在雷达图和line折线图中表现为用折线绘制连接） area --》（同样地，表示多个数据节点的链接，然后有一个闭环，出现了一个面） text --》文本

所有组件对外影响的时候都会抛出一个 trigger对象 trigger对象包括comp（触发的组件）和params两个属性

nodeData, nodeElement ， data和图形之间互相引用的属性约定

颜色取值规则，只有undefined才会认为需要还原皮肤色 “” 或者 null 都会认为是用户主动想要设置的，就为是用户不想他显示

启动文档服务

docsify serve docs

thx/chartx

thx

Reviews

Repository Details

chartx2.0 代码规范

启动文档服务

More Repositories