chart.js是一个非常优秀的开源图表插件，扩展非常灵活，同时也提供了大量的钩子函数，给与用户添加自定义插件，实现个性化的需求。

具体的优势特点，这里不详述，网上大把资料，现开始正式深入了解这个插件.

 

Chart布局大概分为如下六个区域，这些是主要的，也有些特殊，比如左右两边都有Y轴，这个用的较少

 

Chart.js的源码也是根据这几个分区，定义了不同的的函数，负责渲染这几个部分，分工非常明确直观。

Title：为整个chart图表的标题， 它的位置可以配置为上下左右，且都是左右或是上下居中。

Scale(X/Y): 根据提供的数据源，负责渲染X/Y轴,以及X/Y的title，和中间区域网格线。

Legend：负责渲染图表当前包含数据集合的种类，并控制哪些集合显示，哪些集合不显示，位置也可以为上下左右，亦是上下或是左右居中。

Tip：中间黑色弹框部分，负责渲染鼠标停留处，当前dataset的相关属性。

在chart.js源码中，他们对应的构造函数都是从Element() 扩展而来，也就是这几个函数都继承自Element(),  理解这个很重要，是了解chart.js源码的关键之一，后面的会详细介绍这个函数。

DatasetController：最后就是中间柱状图集合。柱状图是其中一种，其他还有

线性图：

气泡图：

 

环状图：

 

饼图：

 

极地图：

 

雷达图：

 

散射图：

 

 

这几种图也可以混合使用，比如