ichartjs图表组件架构一览
前言
ichartjs采用了HTML5的canvas绘制图表,同时一些辅助组件(提示框,十字形)利用HTML的Div构建。这样兼顾了图表灵活性以及高性能。本文就ichartjs的组件架构做逐一的介绍 ,以便大家能更好的了解和使用ichartjs。
架构图一览
组件说明
核心类
Element
:组件*父类,定义了初始化顺序,以及配置特性。
Painter
:画图的抽象类,定义了绘图行为属性。
Chart
:图表的抽象类,定义了图表的基本属性。搭建基本图表骨架,构造公告组件(标题、子标题、脚注、图例)
Component
:图表组件的父类,定义了绘图接口以及响应事件的特性。
Html
:所有以HTML方式构建的组件的父类,定义了基本CSS属性。且具有Transition动画特性。
图表类
Bar :定义了条形图的基本属性,坐标系初始化,以及数据解析。
Bar2D :2D条形图实现类,负责具体的组装工作。
BarMulti2D :2D簇状条形图的实现类,负责具体组装工作。
Column :定义了柱形图的基本属性,坐标系初始化,以及数据解析。
Column2D :2D柱形图实现类,负责具体的组装工作。
Column3D :3D柱形图实现类,定义了3D特性,具体的组装工作由其父类Column2D 负责。
ColumnMulti2D :2D簇状柱形图实现类,负责具体的组装工作。
ColumnMulti3D :3D簇状柱形图实现类,定义了3D特性,具体的组装工作由其父类ColumnMulti2D 负责。
Line :定义了折线图的基本属性,坐标系初始化,以及数据解析。
LineBasic2D :2D折线图实现类,负责具体的组装工作。
Area2D :2D面积图图实现类,定义了面积图的特性,具体的组装工作由其父类LineBasic2D 负责。
Pie :定义了饼图的基本属性,以及数据解析。
Pie2D :2D饼图实现类,负责具体的组装工作。
Donut2D :2D环形图实现类,负责具体的组装工作。
Pie3D :3D饼图实现类,定义了3D的特性,负责具体的组装工作。在此类中,重新对组件进行了分解装配,从而模拟了3D效果。
组件类
Custom :自定义组件类,通过此类,可以在图表基础上,渲染个性化的文字,图形等。用于特殊需求。
Coordinate2D :2D坐标系组件实现类,依赖于Scale 类。
Coordinate3D :3D坐标系组件实现类,定义了3D特性,依赖于Scale 类。
Label :标签组件实现类。
Legend :图例组件实现类。
LineSegment :线段组件实现类。
Rectangle :矩形组件抽象类。
Rectangle2D :2D矩形组件实现类。
Rectangle3D :3D矩形组件实现类。
Scale :坐标刻度组件实现类。
Sector :扇形组件抽象类。
Sector2D :2D扇形组件实现类。
Sector3D :3D扇形组件实现类。
Text :文本组件实现类。
HTML辅助类
Tip :提示框组件实现类。
CrossHair :十字线组件实现类。
以上是目前1.0版本的全部组件,ichartjs的新增图表类型的策略是:
1、为一种类型命名,根据分析相似度以及行为属性决定继承自哪个目前的图表,如果 没有类型相似的, 则继承自Chart ,从而新增一种图表 。比如:2D柱形堆积图就可以继承自Column2D,而如果增加一个散点图,则需要继承自Chart 。
2、在现有的组件中挑选,进行拼装。如果组件库中无可用组件,则在组件库中新增组件,新增组件继承自Component 。
总结
ichartjs采用这种策略,主要是方便扩展,在新增图表类型时,可以从现有的组件库里挑选"零件",进行拼装,这样在增加一种类型时,只是增加了一个拼装的规则代码,这样大大减少了增加的代码量。同时也进行了分类压缩,在ichartjs发布包中的dist文件夹中,按照类别进行了js文件分割。这样无论未来增加多少图表类型,虽然整体代码量在增加,可是引入单独类型的文件则没有明显的变化。