【译】用 Chart.js 做漂亮的响应式表单
数据包围着我们。虽然搜索引擎和其他应用都对基于文本方式表示的数据偏爱有加,但人们发现可视化是更容易理解的一种方式。今年初,SitePoint 发表了 Aurelio 的文章《 Chart.js简介》。在深入研究 Chart.js 的功能后,本文将会讲解这篇简介的一些重点。
入门
Chart.js 是一个基于 HTML5 canvas 的响应式、灵活的、轻量化的图表库。库中提供了六种不同的图表类型,每种类型都带有一系列的自定义选项。如果这些还不够,你还可以创造自己的图表类型。
Chart.js 的六种图表类型代码一共只有 11 kb 大,并做了 gzip 压缩处理,另外该库是模块化的,你可以仅仅使用自己需要的图表类型,从而进一步节省了空间。下面是包含该库的 cdnjs 链接。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
可用的设置项
从提示信息到动画效果(校稿者注:tool tip是指鼠标移动到某个元素上弹出的提示信息),Chart.js 允许你改变图表的几乎所有特征。在本节,我将会修改一些设置,以展示 Chart.js 是如何被创建出来的。我们将从下面的 HTML 代码开始:
<canvas id="canvas"></canvas>
对于首次展示,我会创建一个折线图。为了使图表有意义,这里会有几个需要设置的基本选项。折线图需要一个标签数组和数据集。标签会显示在 X 轴。我已经为折线图模拟了一些数据,这些数据被分开放到一个数组里面去,每个数据有自己的填充颜色、折线和点集。
在这个例子中,我将 fillColor
设置为透明。如果你不设置 fillColor
的值,将默认设置为黑色或者灰色。这同样适用于其他值。色彩使用 RGBA、RGB、hex 或 HSL 格式定义,与 CSS 是一样的。
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 文档查看库中提供的其他选项。
Chart.defaults.global = {
animationSteps : 50,
tooltipYPadding : 16,
tooltipCornerRadius : 0,
tooltipTitleFontStyle : 'normal',
tooltipFillColor : 'rgba(0,160,0,0.8)',
animationEasing : 'easeOutBounce',
scaleLineColor : 'black',
scaleFontSize : 16
}
设置专有的图表选项
除了全局选项,还有一些针对特定图表类型的配置选项。在这个折线图中,我将会设置这类选项,希望对你有所启发:
var ctx = document.getElementById('canvas').getContext('2d');
var lineDemo = new Chart(ctx).Line(lineData, {
responsive: true,
pointDotRadius: 10,
bezierCurve: false,
scaleShowVerticalLines: false,
scaleGridLineColor: 'black'
});
Chart.js 生成的图表默认为非响应式。将 responsive
设置为 true 可以使其转化为响应式图表。如果你需要让每个图表都成为响应式的,我推荐设置全局值,就像这样:
Chart.defaults.global.responsive = true;
下面你会看见这个折线图的示例:
See the Pen Chart.js Responsive Line Chart Demo by SitePoint (@SitePoint) on CodePen.
增加与移除动态数据
有时你需要展示时刻变化的数据。股票市场便是这个应用场景的典型例子。这本节中我将会创建一个柱形图,并且在动态删除数据的同时增加数据。我会使用一些随机数据,并在这个例子中通过柱形图来展示数据。本例中的大部分代码与上一个例子相似。一旦我们拥有自己的 HTML(与上一个例子一样),便可以添加自己的 JavaScript。
首先我们需要编写代码将动态数据填充进图表。我使用function表达式生成随机值,然后将其赋给一个变量 dData
。这些值会在需要变化时为我们提供随机的数据。像之前的例子一样,我创建了一个标签数组和数据集,并设置了一个任意的 fillColor
。
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 秒钟会更新一次图表。
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。
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也为每个图表类型提供了专属的自定义设置。如果当前可用的图表无法满足你的需求,你还可以创造自己的图表类型。我推荐你浏览文档,加深关于该库什么可以做,什么无法做的认识。
本文首发至 伯乐在线 - 感谢 Justin Wu 校稿。
英文出处:Monty Shokeen。
已同步至 Github,欢迎 Star 关注更新。
【译】用 Chart.js 做漂亮的响应式表单的更多相关文章
- ng2响应式表单-翻译与概括官网REACTIVE FORMS页面
本文将半翻译半总结的讲讲ng2官网的另一个未翻译高级教程页面. 原文地址. 文章目的是使用ng2提供的响应式表单技术快速搭出功能完善丰富的界面表单组件. 响应式表单是一项响应式风格的ng2技术,本文将 ...
- Angular2响应式表单
本文将半翻译半总结的讲讲ng2官网的另一个未翻译高级教程页面. 原文地址. 文章目的是使用ng2提供的响应式表单技术快速搭出功能完善丰富的界面表单组件. 响应式表单是一项响应式风格的ng2技术,本文将 ...
- Angular2响应式表单-翻译与概括官网REACTIVE FORMS页面
本文将半翻译半总结的讲讲ng2官网的另一个未翻译高级教程页面. 原文地址. 文章目的是使用ng2提供的响应式表单技术快速搭出功能完善丰富的界面表单组件. 响应式表单是一项响应式风格的ng2技术,本文将 ...
- angular6的响应式表单
1:在AppModule模块里面引入 ReactiveFormsModule 要使用响应式表单,就要从@angular/forms包中导入ReactiveFormsModule,并把它添加到你的NgM ...
- Angular Reactive Forms -- Model-Driven Forms响应式表单
Angular 4.x 中有两种表单: Template-Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 ) 官方文档:https://v2.angul ...
- Angular11 模板表单、响应式表单(自定义验证器)、HTTP、表单元素双向绑定
1 模板表单 模型通过指令隐式创建 技巧01:需要在模块级别引入 FormsModule ,通常在共享模块中引入再导出,然后在需要用到 FormsModule 的模块中导入共享模块就可以啦 impor ...
- Angular之响应式表单 ( Reactive Forms )
项目结构 一 首页 ( index.html ) <!doctype html> <html lang="en"> <head> <met ...
- angular响应式表单 - 状态字段
用于表单验证的过程: touched,untoched pristine,dirty pending
- angular 响应式表单
随机推荐
- UVa 10192 - Vacation & UVa 10066 The Twin Towers ( LCS 最长公共子串)
链接:UVa 10192 题意:给定两个字符串.求最长公共子串的长度 思路:这个是最长公共子串的直接应用 #include<stdio.h> #include<string.h> ...
- 解决dubbo问题:forbid consumer(2)
线下环境经常出现类似这种异常: com.alibaba.dubbo.rpc.RpcException: Forbid consumer 10.0.53.69 access service com.ku ...
- 熊猫猪新系统測试之四:Ubuntu 14.04
眼下猫猪在办公室一般用的就是乌班图系统,一方面原因是老本本性能跑不起来Windows,更重要的是本猫认为Linux系统更开放些.况且如今用的也比較熟了,全然能够脱离Windows鸟!这一系列4篇新系统 ...
- Android Tabhost置于底部
方法一: <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id=&qu ...
- 线程阻塞工具类:LockSupport(读书笔记)
他可以在线程任意位置让线程阻塞, LockSupport的静态方法park()可以阻塞当前线程,类似的还有parkNanos() ParkUntil()等,他们实现了一个限时等待 public cl ...
- Android 热修复使用Gradle Plugin1.5改造Nuwa插件
随着谷歌的Gradle插件版本号的不断升级,Gradle插件如今最新的已经到了2.1.0-beta1,相应的依赖为com.android.tools.build:gradle:2.0.0-beta6, ...
- Nginx 限制单个IP的并发连接数及对每个连接速度(限速)
使用Nginx限制单个IP的并发连接数能够减少一些采集程序或者DDOS的攻击. 再lnmp的nginx配置中已经添加了部分代码,但是是注释掉的,可以编辑/usr/local/nginx/conf/ng ...
- Loadrunner中对中文进行UTF-8转码的探索
上一篇 / 下一篇 2010-02-22 15:20:28 查看( 2378 ) / 评论( 2 ) / 评分( 5 / 0 ) 这是一个HTTP接口测试中经常会碰到的问题,目前的服务器采用的都是U ...
- 怎么以最新汇率牌价计算XX美元相当于多少人民币
http://www.meiguozhuji.com/exchange-rate 美国主机都是以美元来报价的,至于XX美元相当于多少人民币,很多朋友都不太清楚.为了让大家更直接的了解购买美国主机需要花 ...
- cmd命令速查手册
CMD命令速查手册ASSOC显示或修改文件扩展名关联AT 计划在计算机上运行的命令和程序ATTRIB 显示或更改文件属性BREAK 设置或清除扩展式 CTRL+C检查CACLS显示或修改文件的访问控制 ...