使用AngularJS构建数据仪表板

一旦我开始使用AngularJS,我就会发现它能够获取数据并直接在标记中使用它可以为数据可视化提供很大的可能性。这种方法可以提供一种从头开始创建数据可视化的快速而简单的方法,而不必依赖于单独的库。

在本教程中,我们将开始为Web应用程序构建数据仪表板 - 在本例中是一个名为“JogTracker”的RunKeeper克隆。在使用conic-gradient()polyfill之前,我们将从使用HTML样式的Angular值到内联SVG。

Like many fitness tracking applications, one of the most popular parts of Runkeeper is the ability to track your data

与许多健身追踪应用程序一样,Runkeeper最受欢迎的部分之一是能够跟踪您的数据

对我而言,这项技术最吸引人的部分是,即使是最有限的JavaScript知识,您也可以开始构建数据可视化。我们将主要使用我们的脚本文件来保存数据,因此如果您可以编写JavaScript对象,那么您将会很顺利。

应用设置

对于这个原型,我将让Bootstrap在样式和布局方面做得很繁重,因此我们可以专注于Angular特定的代码。我将假设您已在您的HTML中包含Angular库,并已设置并链接您的Angular应用程序(请参阅示例代码有关如何执行此操作的详细信息,如果需要)。

我们现在要为JogTracker应用程序创建数据结构。我们将保持这个非常简单,每个'jog'存储为具有时间,距离和日期属性的对象。我们将这些对象存储在一个名为$ scope.data的数组中 - $ scope允许我们直接从HTML控制器内部访问这些数据。

$ Scope.data = [{距离:3.24,时间:34,日期:新日期(“2015年5月1日”),},//等等......]

为了创建我的可视化,我还需要知道时间和距离的最大值。这可以通过一小段JavaScript来完成:

$ scope.maxDistance = Math.max.apply(Math,$ scope.data.map(function(jog){return jog.distance;}))

然后我可以这样做以找到最长时间。现在我已经存储了所有数据并可以从我的HTML访问,这就是JavaScript!

条形图

我要创建的主要可视化是一个条形图,显示我数据中的最后10个慢跑,以及距离和时间的条形图。可访问性很重要,因此在HTML中我将创建一个包含数据的表,并使用CSS将其直观地转换为条形图。

As the bar chart is a HTML table, we can add table headers just for screen readers for accessibility

由于条形图是一个HTML表格,我们可以为屏幕阅读器添加表格标题以便于访问

首先,我将利用Angular的ng-repeat功能循环遍历我的$ scope.data数组,并将数据吐出到表中。

{{jog.date |日期}} {{jog.time |数字}}分钟 {{jog.distance |数字}}里程

这将为数据中的每个条目创建一个表行。我将每个条目的个人名称声明为jog。这使我能够访问该对象的属性,例如jog.distance。我还使用了一些Angular过滤器。在ng-repeat属性中,limitTo过滤器允许您限制显示的条目数。值10将显示前10个条目,但是我想显示最后10个。为此我将limitTo设置为-10。

我们现在有一个显示我们数据的可访问表。我们把它变成一个条形图。首先,我们需要设置一些CSS来覆盖表的外观。

.bar-chart {display:block;身高:300px;位置:相对; border-left:1px solid#668284; border-bottom:1px solid#668284; } .bar-chart td {position:absolute;宽度:20px;底部:0; }

这会将表格和单元格转换为块元素,添加边框以显示X和Y轴,并在将成为条形图的单元格上设置定位和宽度。我们设置绝对定位,因为我们将使用一些Angular魔法使用left属性在我们的图表中将条形空间分开。

我还为每个栏设置了一些课程,以便为他们提供背景颜色并抵消他们的位置。 .legend单元格将在条形下方显示日期,因此已定位。 .time将位于.distance栏旁边,所以一直有一些限制。

.bar-chart .legend {bottom:-40px; } .bar-chart .distance {background:#B9D7D9; } .bar-chart .time {background:#668284; margin-left:30px; }

有很多额外的风格,例如沿着条形图旋转文本,所以请查看示例项目以获取完整代码。好了,现在在我们的HTML中挖掘Angular魔法!

 {{jog |日期}}  {{jog.time |数字}}分钟  {{jog.distance}}里程 

创建图表的关键部分是ng-style属性,该属性使用Angular数据值应用样式。 Ng风格的样式被写成具有键值对的对象。您还可以在此处传递算术和混合数字和字符串。

首先让我们看一下左边的值,它在所有单元格上都是一样的。我想在我的图表宽度上均匀地排列我的10个条形图,因此将以10%的增量将它们分开。

左:$ Index * 10 +'%'

为此,我使用Angular分配给ng-repeat中所有条目的$ index值,从零开始以1为增量向上,就像在JavaScript数组中一样。因此,如果我们运行数学,我的第一个单元格将具有左值:0% - $ index(0)x 10(0)+'%'(单位为字符串)。我在本专栏中的第二个单元格的左值为10%,接下来的20%,依此类推。我也可以使用数学来改变我的酒吧的高度。

高度:(jog.distance / maxDistance)* 300 +'px'

在这里,我采用我个人慢跑的距离并将其除以阵列中的最大距离。然后我将此乘以300(我的图表在px中的高度),然后将我的px单位作为字符串添加。

如果我们考虑最长距离条目会发生什么,jog.distance / maxDistance的结果将是1(因为它们是相同的数字),这将得到300px的结果。这意味着我们最大的柱子将始终是图表的整个高度,而其他柱子将具有相对于此的高度。

理想情况下,这些逻辑的大部分将被移动到我们的JavaScript,可能作为自定义角度过滤器,使HTML更清晰。但是为了便于理解,在这个阶段我们将直接在HTML中使用它。

Angular data-vis magic的最后一部分是使用ng-class属性根据条件是否满足来应用类。在这种情况下,我想在最长的慢跑中添加一类高亮,所以我将ng-class =“{highlight:jog.distance === maxDistance}”添加到我的元件。

结论

我们的第一个Angular数据可视化已经完成!不仅在样式属性中可以使用Angular值。我们可以在内联SVG中使用它们,甚至可以在Lea Verou的conic-gradient()等polyfill中使用它们来创建更复杂的可视化。

尼克莫顿

Nick Moreton是伯明翰城市大学的讲师。他的专业领域包括HTML,CSS,JavaScript,AngularJS和WordPress。本文最初发表于网络杂志的第274期

喜欢这个?阅读这些!



翻译字数超限