【译】用 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 关注更新。