转载

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

正文到此结束

所属分类：编程技术

本文标签： update tar 需求 value java 代码实例删除 CDN HTML5 DOM http js GitHub Document src https CSS HTML lib git 数据空间 Ajax ip 配置响应式同步 zip 搜索引擎时间 setInterval
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

【译】用 Chart.js 做漂亮的响应式表单

入门

可用的设置项

设置全局选项

设置专有的图表选项

增加与移除动态数据

结论

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流