元力仓库手机 发表于 2024-5-21 22:18:13

Chart.js (v2.9.4)概要介绍

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:最后就是中间柱状图集合。柱状图是其中一种,其他还有
线性图:

气泡图:

 
环状图:

 
饼图:

 
极地图:

 
雷达图:

 
散射图:
 

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

 

来源:https://www.cnblogs.com/wuxianlong/p/17561659.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: Chart.js (v2.9.4)概要介绍