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文件分割。这样无论未来增加多少图表类型，虽然整体代码量在增加，可是引入单独类型的文件则没有明显的变化。