/chartx

Data Visualization Solutions

Primary LanguageJavaScript

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