当前位置: 代码网 > it编程>编程语言>Javascript > Chart.js (v2.9.4)概要介绍

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

2024年05月23日 Javascript 我要评论
chart.js是一个非常优秀的开源图表插件,扩展非常灵活,同时也提供了大量的钩子函数,给与用户添加自定义插件,实现个性化的需求。 具体的优势特点,这里不详述,网上大把资料,现开始正式深入了解这个插件. Chart布局大概分为如下六个区域,这些是主要的,也有些特殊,比如左右两边都有Y轴,这个用的较少 ...

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

线性图:

气泡图:

 

环状图:

 

饼图:

 

极地图:

 

雷达图:

 

散射图:

 

 

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

 

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com