学习进度笔记(二十四)
今天学习了关于chart.js的内容。
之前的好几次可视化的图形展示都是用的chart的内容,但是之前都是现搜现用的,这次系统地学一遍。
在菜鸟的描述是:
Chart.js 是一个简单、灵活的 JavaScript 图表工具。
Chart.js 是一个基于 HTML5 技术的 JavaScript 图表工具。
Chart.js:使用 <canvas> 标签的实现简洁HTML5图表
Chart.js 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表
Chart.js 免费提供给个人学习、个人网站和非商业用途使用。
使用 Chart.js 创建图表,需要初始化 Chart 类,并传入图表节点:
Chart.js 柱形图
柱形图是一种以长方形的长度为变量的统计图表。
柱形图用来比较两个或以上的价值(不同时间或者不同条件),只有一个变量,通常利用于较小的数据集分析。
柱形图的 type 属性为 bar ,type 描述了图表类型。
const config = { type: 'bar', data: data, options: { scales: { y: { beginAtZero: true } } }, };
Chart.js 环形图
环形图又叫做甜甜圈图,其本质是饼图将中间区域挖空。
环形图是由两个及两个以上大小不一的饼图叠在一起,挖去中间的部分所构成的图形。
-
饼图是用圆形及圆内扇形的角度来表示数值大小的图形,它主要用于表示一个样本(或总体)中各组成部分的数据占全部数据的比例,对于研究结构性问题十分有用。
-
环形图与饼图类似,但又有区别。环形图中间有一个"空洞",每个样本用一个环来表示,样本中的每一部分数据用环中的一段表示。因此环形图可显示多个样本各部分所占的相应比例,从而有利于构成的比较研究。
环形图 type 属性为 doughnut ,type 描述了图表类型。
const config = { type: 'doughnut', data: data, };
Chart.js 饼图
饼图,或称饼状图,是一个划分为几个扇形的圆形统计图表,用于描述量、频率或百分比之间的相对关系。在饼图中,每个扇区的弧长(以及圆心角和面积)大小为其所表示的数量的比例。这些扇区合在一起刚好是一个完全的圆形。顾名思义,这些扇区拼成了一个切开的饼形图案。
饼图 type 属性为 pie ,type 描述了图表类型。
const config = { type: 'pie', data: data, };
Chart.js 折线图
折线图是排列在工作表的列或行中的数据可以绘制到折线图中。
折线图可以显示随时间(根据常用比例设置)而变化的连续数据,因此非常适用于显示在相等时间间隔下数据的趋势。
折线图 type 属性为 line ,type 描述了图表类型。
const config = {
type: 'line',
data: data,
};
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)