S1 Chart.js 快速入门

【本文概要】

S1-1 Chart.js 概述

S1-2 创建第一个实例

S1-3 实例练习

S1-4 Chart.js 的安装方式

S1-5 Chart.js 的构建方式

S1-6 Chart.js 的加载方式

S1-1 Chart.js 概述

1.介绍

为设计和开发人员准备的简单、灵活的 JavaScript 图表工具

2.相关网站

官网：http://www.chartjs.org/

Github: https://github.com/chartjs/Chart.js

文档： https://chartjs.bootcss.com/docs/

3.特性

开源：Chart.js 是由社区共同维护的开源项目，欢迎任何人参与！

8种图表类型：支持折线图、柱状图、雷达图、饼图、极地图、气泡图、离散图、Area

HTML5 Canvas：在所有现代浏览器（IE9+）上都有高效的绘图效率。

响应式：根据窗口尺寸的变化重绘所有图表，展现更加细腻。

S1-2 创建第一个实例

将左侧表格中的数据转为右侧的柱状图展示

image.png

【第1步】为Chart 准备一个具备大小（宽高）的 DOM

【第2步】下载并引入Chart.js文件

文件地址：https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js

【第3步】获取元素

【第4步】创建一个Chart实例

注：关于图表中的配置说明，会在后续章节详细讲解。

效果演示：https://91jack.github.io/chart.js_tutorial/s01/firstdemo.html

完整代码：https://github.com/91jack/chart.js_tutorial/blob/master/s01/firstdemo.html

S1-3 实例练习

看完了上面的例子，是不是感觉soeasy,来来来，看下面表格的数据，你敢不敢试一下？

image.png

效果演示：https://91jack.github.io/chart.js_tutorial/s01/firsttask.html

代码地址：https://github.com/91jack/chart.js_tutorial/blob/master/s01/firsttask.html

S1-4 Chart.js 的安装方式

npm

bower

cdn

https://cdnjs.com/libraries/Chart.js

jsDelivr

https://www.jsdelivr.com/package/npm/chart.js?path=dist

Github 下载

https://github.com/chartjs/Chart.js/releases/tag/v2.7.2

建议：初学者建议将文件下载到本地，进行引入使用

S1-5 Chart.js 的构建方式

Chart.js提供了两种不同的构造方式供你选择。

在这里可以下载相应的文件。

独立构建

文件：

-- dist/Chart.js

-- dist/Chart.min.js

注意：此版本仅包含Chart.js。如果使用此版本，并且需要时间轴，则需要在构建之前将Moment.js包含进项目。

完整构建

-- dist/Chart.bundle.js

-- dist/Chart.bundle.min.js

注意：bundle版集成了Moment.js文件。如果你想使用时间轴并希望包含单个文件，则应该使用该版本。如果你已经在应用程序中引用了Moment.js，请使用上面的构造方式，不然将会在程序中包含两个Moment.js，这样会导致页面加载时间增加或潜在的版本引用问题。

S1-5 Chart.js 的加载方式

Chart.js可以与JavaScript集成或与不同的模块加载器集成。下面的例子显示了如何在不同的方式中加载Chart.js。

ES6 模块

Script 标签（新手推荐）

Common JS

Require JS