学习进度笔记(二十四)

   今天学习了关于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,
};
posted @   早起早起^^  阅读(7)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示