学习进度笔记（二十四）

   今天学习了关于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,
};