Learning Path
浏览 Chartjs 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
13
Chart.js 教程 Chart.js 是一个简单、灵活的 JavaScript 图表工具。 Chart.js 是一个基于 HTML5 技术的 JavaScript 图表工具。 Chart.js:使用 <canvas> 标签的实现简洁HTML5图表 Chart.js 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表 Chart.js 免费提供给个人学习、个人网站和非商业用途使用。 ..
Chart.js 气泡图 气泡图用于展示三个变量之间的关系。 气泡的位置由前两个变量决定，对应的是 X 轴和 Y 轴，第三个参数为气泡的大小。 { // X 轴对应值 x: number, // Y 轴对应值 y: number, // 气泡半径，单位为像素 r: number } 泡图的 type 属性为 bubble ，type 描述了图表类型。 const config ..
Chart.js 环形图 环形图又叫做甜甜圈图，其本质是饼图将中间区域挖空。 环形图是由两个及两个以上大小不一的饼图叠在一起，挖去中间的部分所构成的图形。 饼图是用圆形及圆内扇形的角度来表示数值大小的图形，它主要用于表示一个样本（或总体）中各组成部分的数据占全部数据的比例，对于研究结构性问题十分有用。 环形图与饼图类似，但又有区别。环形图中间有一个“空洞”，每个样本用一个环来表示，样本中的每一部分数据用环中的一段表示。因此环形图可..
Chart.js 安装 Chart.js 提供了多种安装方式，适合不同的开发场景： NPM/Yarn - 适合使用构建工具的项目开发 CDN - 适合快速原型开发和学习 GitHub - 适合需要最新特性或参与贡献的开发 1. 通过 NPM/Yarn 安装 NPM (Node Package Manager) 是 JavaScript 的包管理工具，适合现代前端项目开发。 安装步骤 # 使用 npm 安装 npm ..
Chart.js 折线图 折线图是排列在工作表的列或行中的数据可以绘制到折线图中。 折线图可以显示随时间（根据常用比例设置）而变化的连续数据，因此非常适用于显示在相等时间间隔下数据的趋势。 折线图 type 属性为 line ，type 描述了图表类型。 const config = { type: 'line', data: data, }; 接下来我们创建一个简单的折线图： 实例 [mycod..
Chart.js 饼图 饼图，或称饼状图，是一个划分为几个扇形的圆形统计图表，用于描述量、频率或百分比之间的相对关系。在饼图中，每个扇区的弧长（以及圆心角和面积）大小为其所表示的数量的比例。这些扇区合在一起刚好是一个完全的圆形。顾名思义，这些扇区拼成了一个切开的饼形图案。 饼图 type 属性为 pie ，type 描述了图表类型。 const config = { type: 'pie', dat..
Chart.js 极地图 极区图类似于饼图，但每个数据集具有相同的角度，线段的半径根据提供的值有所不同。 混合图 type 属性为 polarArea。 const config = { type: 'polarArea', data: data, options: {} }; 接下来我们创建一个简单的极地图： 实例 [mycode4 type='js'] const ctx..
Chart.js 雷达图 雷达图是一种显示多个数据点及其之间变化的方式。 雷达图是以从同一点开始的轴上表示的三个或更多个定量变量的二维图表的形式显示多变量数据的图形方法。 轴的相对位置和角度通常是无信息的。 混合图 type 属性为 radar。 const config = { type: 'radar', data: data, options: { elements: { ..
Chart.js 混合图 Chart.js 可以创建由两种或多种不同图表类型组合而成的混合图表，比如条形图与折线图的混合。 创建混合图表时，我们在每个数据集上指定图表类型。 混合图 type 属性为 scatter。 柱形图 type 属性为 bar ，折线图 type 属性为 line ， type 描述了图表类型。 const mixedChart = new Chart(ctx, { data: { ..
Chart.js 散点图 散点图是由两组数据构成多个坐标点，考察坐标点的分布，判断两变量之间是否存在某种关联或总结坐标点的分布模式。 数据结构： data: [{ x: 10, y: 20 }, { x: 15, y: 10 }] 散点图 type 属性为 scatter。 const config = { type: 'scatter&..
Chart.js 柱形图 柱形图是一种以长方形的长度为变量的统计图表。 柱形图用来比较两个或以上的价值（不同时间或者不同条件），只有一个变量，通常利用于较小的数据集分析。 柱形图的 type 属性为 bar ，type 描述了图表类型。 const config = { type: 'bar', data: data, options: { scales: { y: { ..
Chart.js 使用 使用 Chart.js 创建图表，需要初始化 Chart 类，并传入图表节点： HTML Canvas 代码，图表显示位置： [mycode4 type='html'] [/mycode4] 通过不同方式获取节点： 初始化方式 [mycode4 type='js'] //以下方式都可以 const ctx = document.getElemen..