【译】用 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 是一样的。
1 var lineData = { 2 labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 3 'Data 5', 'Data 6', 'Data 7'], 4 datasets: [{ 5 fillColor: 'rgba(0,0,0,0)', 6 strokeColor: 'rgba(220,180,0,1)', 7 pointColor: 'rgba(220,180,0,1)', 8 data: [20, 30, 80, 20, 40, 10, 60] 9 }, { 10 fillColor: 'rgba(0,0,0,0)', 11 strokeColor: 'rgba(151,187,205,1)', 12 pointColor: 'rgba(151,187,205,1)', 13 data: [60, 10, 40, 30, 80, 30, 20] 14 }] 15 } 设置全局选项
在代码中我已经设置了一些全局值。 animationSteps 决定了动画的持续时间。根据需要，你可以修改更多的选项，比如 scaleLineColor 和 scaleIntegersOnly 。我建议浏览 Chart.js 文档 查看库中提供的其他选项。
1 Chart.defaults.global = { 2 animationSteps : 50, 3 tooltipYPadding : 16, 4 tooltipCornerRadius : 0, 5 tooltipTitleFontStyle : 'normal', 6 tooltipFillColor : 'rgba(0,160,0,0.8)', 7 animationEasing : 'easeOutBounce', 8 scaleLineColor : 'black', 9 scaleFontSize : 16 10 } 设置专有的图表选项
除了全局选项，还有一些针对特定图表类型的配置选项。在这个折线图中，我将会设置这类选项，希望对你有所启发：
1 var ctx = document.getElementById('canvas').getContext('2d'); 2 var lineDemo = new Chart(ctx).Line(lineData, { 3 responsive: true, 4 pointDotRadius: 10, 5 bezierCurve: false, 6 scaleShowVerticalLines: false, 7 scaleGridLineColor: 'black' 8 }); 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 。
1 var dData = function() { 2 return Math.round(Math.random() * 90) + 10; 3 }; 4 5 var barData = { 6 labels: ['dD 1', 'dD 2', 'dD 3', 'dD 4', 7 'dD 5', 'dD 6', 'dD 7', 'dD 8'], 8 datasets: [{ 9 fillColor: 'rgba(0,60,100,1)', 10 strokeColor: 'black', 11 data: [dData(), dData(), dData(), dData(), 12 dData(), dData(), dData(), dData()] 13 }] 14 } 现在是时候编写代码来为我们的图表删除与添加柱形了。开始时我们初始化 index 的值为 11，我使用了两个方法： removeData() 和 addData(valuesArray,label) 。调用实例的 removeData() 方法删除图表所有数据集的第一个值。在 barChartDemo 这个例子中，数据集的第一个值被移除了。调用 addData() 顺着标签传递一个数组值，在图表的最后增加一个新的数据节点。下面的代码片段每 3 秒钟会更新一次图表。
1 var index = 11; 2 var ctx = document.getElementById('canvas').getContext('2d'); 3 var barDemo = new Chart(ctx).Bar(barData, { 4 responsive: true 5 }); 6 7 setInterval(function() { 8 barDemo.removeData(); 9 barDemo.addData([dData()], 'dD ' + index); 10 index++; 11 }, 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 关注更新。
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
