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

线性图:

气泡图:

 

环状图:

 

饼图:

 

极地图:

 

雷达图:

 

散射图:

 

 

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/710236.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

window版postgresql安装orafce插件

在Visual Studio中创建一个新的C工程:将解压目录下的除.sql和文件夹之外的文件都copy到新创建的工程中,另外要将sqlscan.c排除在项目之外 配置编译选项配置预处理器,预处理器定义中的内容为: WIN32 _WINDOWS _DEBUG _CRT_SECURE_NO_WARNINGS 注意要有_CRT_SECURE_NO_WARNI…

为什么 mov sp, 32,debug程序,执行sp=32的位置,后面的代码就全乱了(在小甲鱼零基础汇编第6章,包含多段程序,的视频代码)

assume cs:code, ds:data, ss:stackdata segmentdw 0123h, 0456h, 0789h, 0abch, 0defh, 0fedh, 0cbah, 0987h; 用来作存放数据 data endsstack segmentdw 0, 0, 0, 0, 0, 0, 0, 0; 用来作栈的空间 stack ends code segmentstart:; 设置数据段mov ax, datamov ds, ax ; 设…

mysql报错:Lock wait timeout exceeded: try restadina transaction

这次是在Navicat上复制了一个表结构和数据准备备份一下,然后要用语句批量处理数据,结果导致项目上的更新操作报这个错误。原因是因为表中的数据量太大,复制表一时半会卡到那了。于是我在网上搜索了如下办法。尝试在数据库中杀死线程来终止复制表的操作。 SELECT * FROM info…

ASP.NET之JSONHelper操作

之前说到了Ext.Net中GridPanel行取值的问题(Ext.Net开发_GridPanel行选中取值),涉及到checkBox操作时,要留个心眼注意下取值的区别!返回值是Json格式。 现在用到了Json,就想自己也整一个Josn帮助类。在线帮助的资料很多,在巨人的身上东凑西凑也凑一个用用。   一、介绍…

Git:warning: CALF wilL be replaced by LF in xxxx 问题解决

warning: CALF wilL be replaced by LF in xxxx 问题解决办法 出现这个问题的原因是像缓存区中提交文件时出现的 原因: windows中的换行符为 CRLF,而在Linux下的换行符为LF,所以在执行add . 时出现提示 也就是, 工作区的文件都应该用 CRLF 来换行。如果 改动文件时引入了 …

密码爆破ssh与ftp服务(finish)

密码爆破ssh与ftp服务 使用工具九头蛇(hydra) ssh 环境配置 win10 安装sshd服务端在cmd命令行使用 net start sshd 命令启动服务kali 打开终端查看是否开启ssh服务 nmap -sV -T4 -p- [kali的ip] 先创建一个用户名字典username.txt,把经常用的用户名写入到字典中 touch usern…

Obsidian第三方插件下载

一、从Obsidian插件市场下载 使用第三方插件的第一步是关闭安全模式。点击“浏览”,搜索需要的插件名称。在这里输入名称搜索。点击安装。点击启用。必要时要使用魔法。 替代方法proxy-github二、从别的地方下载的插件 首先了解一下obsidian插件的基本构成,主要包括下面的文件…

鸿蒙4.2小版本大亮点,鸿蒙5.0也不远了

混合应用开发技术,特别是结合小程序和原生技术,为鸿蒙应用开发带来了显著的优势。首先,它简化了开发流程,使开发者能够迅速创建出高质量的应用程序。这不仅缩短了开发周期,还提升了应用的整体性能和用户体验。上个月,市场上迎来了华为鸿蒙系统4字开头的小升级,版本来到了…

JPA和Hibernate的乐观锁与悲观锁

哈喽,大家好,我是木头左!JPA和Hibernate的乐观锁和悲观锁 乐观锁 乐观锁是一种假设资源不会被冲突影响的并发控制策略。它假设多个事务在同一时间内不会发生冲突,因此不需要加锁。当事务提交时,如果检测到数据发生了改变,就会抛出异常,让开发者决定如何处理这个冲突。 在…

树形DP

树形 DP 即在树上进行的 DP。 常见的两种转移方向:父节点 \(\rightarrow\) 子节点:如求节点深度,\(dp_u = dp_{fa} + 1\) 子节点 \(\rightarrow\) 父节点:如求子树大小,\(dp_u = 1 + \sum dp_v\)习题:P5658 [CSP-S2019] 括号树暴力 本题 \(n\) 小的数据点保证为链,直接枚…

DBever SQL编辑器的高级应用:如何用变量快速查询

哈喽,大家好,我是木头左!一、DBever SQL编辑器简介 DBever是一款数据库管理工具,它支持多种数据库,如MySQL、SQL Server、Oracle等。其中,它的SQL编辑器功能非常强大,可以让更方便地进行SQL语句的编写和执行。今天,就来探讨一下DBever SQL编辑器中如何使用变量的方式。…

EDP .Net开发框架--自动化日志

EDP是一套集组织架构,权限框架【功能权限,操作权限,数据访问权限,WebApi权限】,自动化日志,动态Interface,WebApi管理等基础功能于一体的,基于.net的企业应用开发框架。通过友好的编码方式实现数据行、列权限的管控。平台下载地址:https://gitee.com/alwaysinsist/edp…