前言
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文件分割。这样无论未来增加多少图表类型,虽然整体代码量在增加,可是引入单独类型的文件则没有明显的变化。
- 大小: 58.4 KB
分享到:
相关推荐
作品名称:Axure数据可视化图表组件库 作品类型:组件类 主要适用:Web端 软件版本:Axure 8.0 一套数据可视化图表通用组件库,主要由Antv静态图表、Axhub动态图表、地图组件素材三部分内容组成,其中包含了几十种...
NULL 博文链接:https://ichartjs.iteye.com/blog/1894161
适合uni-app 使用的echarts图表组件,开箱即用!
LIB008 - Axure数据可视化图表组件库(AxureUX整理) LIB008 - Axure数据可视化图表组件库(AxureUX整理) LIB008 - Axure数据可视化图表组件库(AxureUX整理) LIB008 - Axure数据可视化图表组件库(AxureUX整理) LIB008 -...
ichartjs致力于为您的应用提供简单、直观、可交互的体验级图表组件。是WEB/APP图表展示方面的解决方案 。如果你正在开发HTML5的应用,ichartjs正好适合您。 ichartjs目前支持饼图、环形图、折线图、面积图、柱形图...
主要是集成一些Axure中关于图表的展示部分,在实际的设计中用处很是广泛,包括一些柱状图,饼图,折线图等基本图形的展示。 主要是集成一些Axure中关于图表的展示部分,在实际的设计中用处很是广泛,包括一些柱状图...
Axure数据可视化图表组件库(比较全的图标库)
ichartjs能绘制的所有图表,基础知识,学习结合icharjs API:http://www.ichartjs.com/docs/zh
Axure数据可视化图表组件库.rar
【Axure数据可视化大屏原型合集】之数据可视化图表组件【Axure数据可视化大屏原型合集】之数据可视化图表组件【Axure数据可视化大屏原型合集】之数据可视化图表组件【Axure数据可视化大屏原型合集】之数据可视化图表...
插件描述:利用HTML5的canvas标签绘制各式图形。 参考示例:http://www.jq22.com/jquery-info4950
基于vue的PC组件库和svg的图表组件源码+项目说明.zip基于vue的PC组件库和svg的图表组件源码+项目说明.zip基于vue的PC组件库和svg的图表组件源码+项目说明.zip基于vue的PC组件库和svg的图表组件源码+项目说明.zip基于...
Axure数据可视化图表组件库(AxureUX整理)。
对jqplot与JFreeChart两种web图表组件进行效果对比,以便根据具体情况选择合适的图表工具。
非常优秀的图表组件(jcommon-0.9.1;jfreechart-0.9.16),附有jsp 例子
react-chartjs - 使用chart.js的常见react图表组件
echarits完整版(包含所有图表组件),主要用于构建图表,柱状图,饼图,折线统计图等echarits完整版(包含所有图表组件),主要用于构建图表,柱状图,饼图,折线统计图等
Axure9元件 数据可视化图表组件库
本作品是由AxueUX整理的一套数据可视化图表通用组件库,主要由Antv静态图表、Axhub动态图表、地图组件素材三部分内容组成,其中包含了几十种常用图表类型和全国34个省级行政区地图,可以满足大部分的原型设计图表...