Advertisement
  1. Web Design
  2. HTML & CSS
Webdesign

简易可视化数据:在浏览器中用方差图

by
Difficulty:IntermediateLength:ShortLanguages:

Chinese (Simplified) (中文(简体)) translation by Fish Zou (you can also view the original English article)

今天,我们将深入学习方差图;一种基于JavaScript的独特“图形语法”,它提供了一种抽象的,声明性的标记样式来创建本来相当复杂的图表。 方差图介于D3.jsHighCharts之间,提供了一个灵活且通俗易懂的语法。

使用方差图不需要有深奥的JavaScript知识。 让我们看看吧! 

获得库

方差通过它自己的CDN提供一个非商业版本,你应该把它包含在页面中,如下:

你可能还想要一个style.css文件。 我们将跳过HTML文件的基础设置的解释过程,因为这些细节大多数是一目了然的。

我们的第一个图表

方差可以同时读取JSON和CSV;我们将通过使用以下非官方的培根普及CSV数据创建一个简单的条形图:

从这些数据看,培根正变得越来越受欢迎。 例如,1990,20表明培根是在199020流行度(不管那意味着什么),但是在1995年流行度涨到231

但是实际上,为了直观地看到这一点,我们想用条形图来展现它。 下面是我们如何标记图表的一个例子(快速浏览各种元素)。

我们还需要一些附带的CSS来设置图标的大小。 为此,我们将把全部标记包裹进<div class='container'>里,并增加以下样式到style.css文件中:

注意以下事情:

  • 图表标记和HTML非常像。 事实上,它是一个用于构建条形图的有效的XML。 我们还使用这个自定义标记来包装CSV数据, 在chart标记中引用CSV元素。
  • scale-y-linear告诉我们y方向的度数。 在我们的例子,数据值高至16000,低至20。 为了覆盖该区间,我们设置底部为0,顶部为20000。
  • guide-x/guide-y在相应的轴线上创建刻度标记向导。
  • <repeat>遍历数据,并根据每个数据点来创建项。
  • annotation是一个可以放置特定项目的标签,比如bar。 花括号允许显示一段数据;在此例,year在CSV中,所以我们可以容易地输出年。
  • bar制作条形元素,而map-length则定义了CSV条形bacons图的宽度。

非常棒! 现在我们如何让它不那么丑呢?

图表样式化

为了样式化图表,我们只需在CSS中使用普通元素。 图表的条形元素是普通的块状层级DOM元素,使用flexbox安放。 我们将为CSS增加些样式,这样它们等下会看起来更像回事啦。

注意:我们已经在我们的style.css链接上方加了一个谷歌字体到索引文件中:

我们还在这里添加了一些额外的好料:在容器和body元素之间增加了模糊窗口效果。 我们利用第二个背景图像来实现这一点。

现在我们有一个更有用的图表。 但它会变得更好。

动画和工具提示

即兴发挥的时候到了,在图表中开始使用一些工具提示。 为了使事情顺利进行,我们将为每个条形添加一个新的注释,以便我们的图表标记看起来如下所示:

之后,我们将为CSS添加一些新的样式,比如一些有趣的悬停效果和工具提示的简单转换效果:

动画

最后,我们希望让条形图动画化。 我们将使用一个关键帧动画来实现:

然后,我们将应用到bar元素中:

这可以用-webkit-transform: scale( 1, 0 )实现,但我们希望它能尽可能保持简洁。 你还应该确保在必要时添加适当的前缀。

进一步认识方差

方差不仅可以很好地解释更复杂例子,还可以很好地提供文档索引。 你将发现方差是能够实现更复杂的可视化的。 我们将简要谈谈这里的一些要点。

方差利用图表不同核心部分的名字来使得构建图表更容易,包括pointdotrangebarboxplotline。 它们每个都有自己的固定输入。 这些都可以相互组合使用,并且可以用repeat块以迭代方式创建。

方差也可以用关联数据来允许API驱动的可视化,以具有动态更新的信息。

结论

今天,您已经学会了如何使用方差图创建一个完全声明性的、动态的、样式化的图表。 为了让你快速上手,我们在方差中省略了很多有用的功能,所以一定要亲自检查一下!

培根图jeffreyww于Flickr编纂。 2.0版制作公开

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.