使用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 相关文章推荐
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
JS.findElementById()使用介绍
Sep 21 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 Javascript
js合并两个数组生成合并后的key:value数组
May 09 Javascript
微信小程序3D轮播实现代码
Sep 19 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 Javascript
浅谈JavaScript 声明提升
Sep 14 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 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从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
Laravel日志用法详解
2016/10/09 PHP
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
Python本地与全局命名空间用法实例
2015/06/16 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
网站域名和主机:Domain.com
2019/04/01 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
计算机专业毕业生自我鉴定
2014/01/16 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
安全生产大检查方案
2014/05/07 职场文书
中学教师师德承诺书
2014/05/23 职场文书
主题团日活动总结
2014/06/25 职场文书
公司总经理岗位职责
2015/04/01 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python
Django中session进行权限管理的使用
2021/07/09 Python
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS