使用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 相关文章推荐
网上应用的一个不错common.js脚本
Aug 08 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
JavaScript使用concat连接数组的方法
Apr 06 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 Javascript
JavaScript模板引擎原理与用法详解
Dec 24 Javascript
layui自定义ajax左侧三级菜单
Jul 26 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
Feb 12 Javascript
javascript+css实现进度条效果
Mar 25 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 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
用PHP动态创建Flash动画
2006/10/09 PHP
php5.2时间相差8小时
2007/01/15 PHP
php下实现折线图效果的代码
2007/04/28 PHP
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
js接收并转化Java中的数组对象的方法
2016/08/11 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
python fabric使用笔记
2015/05/09 Python
python Socket之客户端和服务端握手详解
2017/09/18 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
详解Python locals()的陷阱
2019/03/26 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
python实现用户名密码校验
2020/03/18 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
教育科学研究生自荐信
2013/10/09 职场文书
职工趣味运动会方案
2014/02/10 职场文书
《陶罐和铁罐》教学反思
2014/02/19 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
门市房租房协议书
2014/12/04 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL