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:最后就是中间柱状图集合。柱状图是其中一种,其他还有
线性图:
气泡图:
环状图:
饼图:
极地图:
雷达图:
散射图:
这几种图也可以混合使用,比如
分类:
js / Chart.js
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器