使用Chart.js图表库制作漂亮的响应式表单


Posted in Javascript onOctober 28, 2015

入门基础

Chart.js是一个基于HTML5的开源图表库,可以方便简洁的绘制美观的图表。

主要特性包括:

1、支持6种不同的表格类型:曲线图、柱状图、饼状图、雷达图、极坐标区域图、环图。
2、基于HTML5开发,支持所有浏览器(包括IE7/8).
3、不依赖于其他任何库,仅有4.5k大小,并且可以进行定制。

Chart.js 是一个基于 HTML5 canvas 的响应式、灵活的、轻量化的图表库。库中提供了六种不同的图表类型,每种类型都带有一系列的自定义选项。如果这些还不够,你还可以创造自己的图表类型。

Chart.js 的六种图表类型代码一共只有 11 kb 大,并做了 gzip 压缩处理,另外该库是模块化的,你可以仅仅使用自己需要的图表类型,从而进一步节省了空间。下面是包含该库的 cdnjs 链接。

JavaScript

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

可用的设置项

从提示信息到动画效果(校稿者注:tool tip是指鼠标移动到某个元素上弹出的提示信息),Chart.js 允许你改变图表的几乎所有特征。在本节,我将会修改一些设置,以展示 Chart.js 是如何被创建出来的。我们将从下面的 HTML 代码开始:

XHTML

<canvas id="canvas"></canvas>

对于首次展示,我会创建一个折线图。为了使图表有意义,这里会有几个需要设置的基本选项。折线图需要一个标签数组和数据集。标签会显示在 X 轴。我已经为折线图模拟了一些数据,这些数据被分开放到一个数组里面去,每个数据有自己的填充颜色、折线和点集。

在这个例子中,我将 fillColor设置为透明。如果你不设置 fillColor 的值,将默认设置为黑色或者灰色。这同样适用于其他值。色彩使用 RGBA、RGB、hex 或 HSL 格式定义,与 CSS 是一样的。

JavaScript

var lineData = {
 labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 
      'Data 5', 'Data 6', 'Data 7'],
 datasets: [{
  fillColor: 'rgba(0,0,0,0)',
  strokeColor: 'rgba(220,180,0,1)',
  pointColor: 'rgba(220,180,0,1)',
  data: [20, 30, 80, 20, 40, 10, 60]
 }, {
  fillColor: 'rgba(0,0,0,0)',
  strokeColor: 'rgba(151,187,205,1)',
  pointColor: 'rgba(151,187,205,1)',
  data: [60, 10, 40, 30, 80, 30, 20]
 }]
}

设置全局选项

在代码中我已经设置了一些全局值。animationSteps 决定了动画的持续时间。根据需要,你可以修改更多的选项,比如 scaleLineColor 和 scaleIntegersOnly。我建议浏览 Chart.js 文档查看库中提供的其他选项。

JavaScript

Chart.defaults.global = {
 animationSteps : 50,
 tooltipYPadding : 16,
 tooltipCornerRadius : 0,
 tooltipTitleFontStyle : 'normal',
 tooltipFillColor : 'rgba(0,160,0,0.8)',
 animationEasing : 'easeOutBounce',
 scaleLineColor : 'black',
 scaleFontSize : 16
}

设置专有的图表选项

除了全局选项,还有一些针对特定图表类型的配置选项。在这个折线图中,我将会设置这类选项,希望对你有所启发:

JavaScript

Chart.defaults.global = {
animationSteps : 50,
tooltipYPadding : 16,
tooltipCornerRadius : 0,
tooltipTitleFontStyle : 'normal',
tooltipFillColor : 'rgba(0,160,0,0.8)',
animationEasing : 'easeOutBounce',
scaleLineColor : 'black',
scaleFontSize : 16
}

Chart.js 生成的图表默认为非响应式。将 responsive 设置为 true 可以使其转化为响应式图表。如果你需要让每个图表都成为响应式的,我推荐设置全局值,就像这样:

JavaScript

Chart.defaults.global.responsive = true;

下面你会看见这个折线图的示例:

See the Pen Chart.js Responsive Line Chart Demo by SitePoint (@SitePoint) on CodePen.

增加与移除动态数据

有时你需要展示时刻变化的数据。股票市场便是这个应用场景的典型例子。这本节中我将会创建一个柱形图,并且在动态删除数据的同时增加数据。我会使用一些随机数据,并在这个例子中通过柱形图来展示数据。本例中的大部分代码与上一个例子相似。一旦我们拥有自己的 HTML(与上一个例子一样),便可以添加自己的 JavaScript。

首先我们需要编写代码将动态数据填充进图表。我使用function表达式生成随机值,然后将其赋给一个变量 dData。这些值会在需要变化时为我们提供随机的数据。像之前的例子一样,我创建了一个标签数组和数据集,并设置了一个任意的 fillColor。

JavaScript

var dData = function() {
 return Math.round(Math.random() * 90) + 10;
};
var barData = {
 labels: ['dD 1', 'dD 2', 'dD 3', 'dD 4',
      'dD 5', 'dD 6', 'dD 7', 'dD 8'],
 datasets: [{
  fillColor: 'rgba(0,60,100,1)',
  strokeColor: 'black',
  data: [dData(), dData(), dData(), dData(),
      dData(), dData(), dData(), dData()]
 }]
}

现在是时候编写代码来为我们的图表删除与添加柱形了。开始时我们初始化 index 的值为 11,我使用了两个方法:removeData() 和 addData(valuesArray,label)。调用实例的 removeData() 方法删除图表所有数据集的第一个值。在 barChartDemo 这个例子中,数据集的第一个值被移除了。调用 addData() 顺着标签传递一个数组值,在图表的最后增加一个新的数据节点。下面的代码片段每 3 秒钟会更新一次图表。

JavaScript

var index = 11;
var ctx = document.getElementById('canvas').getContext('2d');
var barDemo = new Chart(ctx).Bar(barData, {
 responsive: true
});
setInterval(function() {
 barDemo.removeData();
 barDemo.addData([dData()], 'dD ' + index);
 index++;
}, 3000);

另一个更新图表数值的方法是直接设置数值。在下面的例子中,第一行是将第一个数据集的第二个柱形的数值设为 60。如果你在这时更新,柱形会通过动画将其当前值变为 60。

JavaScript

barDemo.datasets[0].bars[2].value = 60;
barDemo.update();

这里是柱形图的示例(由SitePoint在CodePen上创建):

See the Pen Chart.js Responsive Bar Chart Demo by SitePoint (@SitePoint) on CodePen.

结论

这个教程覆盖了关于 Chart.js 的一些重要功能。第一个例子展示了一些全局设置的使用,同时,Chart.js也为每个图表类型提供了专属的自定义设置。如果当前可用的图表无法满足你的需求,你还可以创造自己的图表类型。我推荐你浏览文档,加深关于该库什么可以做,什么无法做的认识。

Javascript 相关文章推荐
Extjs入门之动态加载树代码
Apr 09 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 Javascript
jquery ztree实现下拉树形框使用到了json数据
May 14 Javascript
javascript实现密码强度显示
Mar 18 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
Jun 12 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
Sep 10 Javascript
js Math数学简单使用操作示例
Mar 13 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
Oct 27 #Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 #Javascript
jquery实现的V字形显示效果代码
Oct 27 #Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 #Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 #Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 #Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 #Javascript
You might like
AM/FM收音机的安装与调试
2021/03/02 无线电
MySQL连接数超过限制的解决方法
2011/07/17 PHP
php使用百度翻译api示例分享
2014/01/31 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
php中使用gd库实现下载网页中所有图片
2015/05/12 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
toString.call()通用的判断数据类型方法示例
2020/08/28 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
Numpy之文件存取的示例代码
2018/08/03 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
VC++笔试题
2014/10/13 面试题
了解AppleTalk协议吗
2014/04/01 面试题
应届毕业生个人自我评价
2013/09/20 职场文书
教师党员公开承诺书
2014/03/25 职场文书
成绩单公证书
2014/04/10 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
煤矿安全协议书
2014/08/20 职场文书
前台岗位职责范本
2015/04/16 职场文书
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android