Chinese (Simplified) (中文（简体）) translation by Fish Zou (you can also view the original English article)
今天，我们将深入学习方差图；一种基于JavaScript的独特“图形语法”，它提供了一种抽象的，声明性的标记样式来创建本来相当复杂的图表。 方差图介于D3.js和HighCharts之间，提供了一个灵活且通俗易懂的语法。
使用方差图不需要有深奥的JavaScript知识。 让我们看看吧！
获得库
方差通过它自己的CDN提供一个非商业版本，你应该把它包含在页面中，如下：
1 |
<script src="http://variancecharts.com/cdn/variance-noncommercial-standalone-9bc0f5e.min.js" charset="UTF-8"></script> |
你可能还想要一个style.css文件。 我们将跳过HTML文件的基础设置的解释过程，因为这些细节大多数是一目了然的。
我们的第一个图表
方差可以同时读取JSON和CSV；我们将通过使用以下非官方的培根普及CSV数据创建一个简单的条形图：
1 |
<csv id="yearly-bacons"> year,bacons 1990,20 1995,231 2000,639 2005,1625 2010,7000 2015,16000 </csv> |
从这些数据看，培根正变得越来越受欢迎。 例如，1990，20表明培根是在1990年20流行度（不管那意味着什么），但是在1995年流行度涨到231。
但是实际上，为了直观地看到这一点，我们想用条形图来展现它。 下面是我们如何标记图表的一个例子（快速浏览各种元素）。
1 |
<div class="bacon-chart"> |
2 |
<h3>Bacon data</h3> |
3 |
<chart data="#yearly-bacons" scale-y-linear="0 20000"> |
4 |
<guide-x></guide-x>
|
5 |
<guide-y></guide-y>
|
6 |
<repeat>
|
7 |
<annotation class="bottom">{{year}}</annotation> |
8 |
<bar map-length="bacons"></bar> |
9 |
</repeat>
|
10 |
</chart>
|
11 |
</div>
|
我们还需要一些附带的CSS来设置图标的大小。 为此，我们将把全部标记包裹进<div class='container'>里，并增加以下样式到style.css文件中：
1 |
.container { |
2 |
width:50%; |
3 |
margin:60px auto; |
4 |
}
|
5 |
|
6 |
.container chart { |
7 |
width:100%; |
8 |
height:400px; |
9 |
}
|
注意以下事情：
- 图表标记和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增加些样式，这样它们等下会看起来更像回事啦。
1 |
body { |
2 |
color:#3f130c; |
3 |
height:100%; |
4 |
font-family:sans-serif; |
5 |
background-image:url(../bg.jpg); |
6 |
background-size:cover; |
7 |
background-position:center; |
8 |
background-repeat:no-repeat; |
9 |
background-attachment:fixed; |
10 |
}
|
11 |
|
12 |
h1,h2,h3,h4 { |
13 |
font-family:Tauri, sans-serif; |
14 |
}
|
15 |
|
16 |
.container { |
17 |
width:50%; |
18 |
position:relative; |
19 |
background-image:url(../bg-blur.jpg); |
20 |
background-size:cover; |
21 |
background-position:center; |
22 |
background-repeat:no-repeat; |
23 |
background-attachment:fixed; |
24 |
margin:100px auto; |
25 |
padding:100px; |
26 |
}
|
27 |
|
28 |
.bacon-chart { |
29 |
position:relative; |
30 |
z-index:999; |
31 |
}
|
32 |
|
33 |
.bacon-chart h3 { |
34 |
margin:0 0 1em; |
35 |
}
|
36 |
|
37 |
.container:after { |
38 |
background-color:rgba(255,255,255,0.4); |
39 |
position:absolute; |
40 |
top:0; |
41 |
left:0; |
42 |
width:100%; |
43 |
height:100%; |
44 |
content:""; |
45 |
}
|
46 |
|
47 |
.container chart { |
48 |
width:100%; |
49 |
height:400px; |
50 |
}
|
51 |
|
52 |
.bacon-chart bar { |
53 |
background-color:rgba(96,28,18,0.7); |
54 |
border:none; |
55 |
}
|
注意：我们已经在我们的style.css链接上方加了一个谷歌字体到索引文件中：
1 |
<link href='http://fonts.googleapis.com/css?family=Tauri' rel='stylesheet' type='text/css'> |
我们还在这里添加了一些额外的好料：在容器和body元素之间增加了模糊窗口效果。 我们利用第二个背景图像来实现这一点。
现在我们有一个更有用的图表。 但它会变得更好。
动画和工具提示
即兴发挥的时候到了，在图表中开始使用一些工具提示。 为了使事情顺利进行，我们将为每个条形添加一个新的注释，以便我们的图表标记看起来如下所示：
1 |
<chart data="#yearly-bacons" scale-y-linear="0 20000" scale-y-linear="1990 2015"> |
2 |
<guide-x></guide-x>
|
3 |
<guide-y></guide-y>
|
4 |
<repeat>
|
5 |
<annotation class="bottom">{{year}}</annotation> |
6 |
<annotation class="tooltip" map-position="bacons">{{bacons}}</annotation> |
7 |
<bar map-length="bacons"></bar> |
8 |
</repeat>
|
9 |
</chart>
|
之后，我们将为CSS添加一些新的样式，比如一些有趣的悬停效果和工具提示的简单转换效果：
1 |
.bacon-chart bar { |
2 |
background-color:rgba(96,28,18,0.7); |
3 |
border:none; |
4 |
margin:0!important; |
5 |
}
|
6 |
|
7 |
datum { |
8 |
overflow:hidden; |
9 |
}
|
10 |
|
11 |
.tooltip { |
12 |
width:auto; |
13 |
height:auto; |
14 |
background-color:#444; |
15 |
color:#fff; |
16 |
opacity:0; |
17 |
left:-100%; |
18 |
font-size:.6em; |
19 |
-webkit-transition:all .4s; |
20 |
-moz-transition:all .4s; |
21 |
-ms-transition:all .4s; |
22 |
-o-transition:all .4s; |
23 |
transition:all .4s; |
24 |
padding:6px; |
25 |
}
|
26 |
|
27 |
datum:hover { |
28 |
background-color:rgba(255,255,255,0.1); |
29 |
}
|
30 |
|
31 |
datum:hover .tooltip { |
32 |
display:block; |
33 |
opacity:1; |
34 |
left:0; |
35 |
}
|
动画
最后，我们希望让条形图动画化。 我们将使用一个关键帧动画来实现：
1 |
@-webkit - keyframes barsIn { |
2 |
0 % { |
3 |
bottom: -100 % ; |
4 |
}
|
5 |
100 % { |
6 |
bottom: 0; |
7 |
}
|
8 |
}
|
然后，我们将应用到bar元素中：
1 |
.bacon - chart bar { |
2 |
background - color: rgba(96, 28, 18, 0.7); |
3 |
margin: 0!important; |
4 |
border: none; |
5 |
height: 0; - webkit - animation: barsIn 1s; |
6 |
}
|
这可以用-webkit-transform: scale( 1, 0 )实现，但我们希望它能尽可能保持简洁。 你还应该确保在必要时添加适当的前缀。
进一步认识方差
方差不仅可以很好地解释更复杂例子，还可以很好地提供文档索引。 你将发现方差是能够实现更复杂的可视化的。 我们将简要谈谈这里的一些要点。
方差利用图表不同核心部分的名字来使得构建图表更容易，包括point，dot，range，bar，boxplot和line。 它们每个都有自己的固定输入。 这些都可以相互组合使用，并且可以用repeat块以迭代方式创建。
方差也可以用关联数据来允许API驱动的可视化，以具有动态更新的信息。
结论
今天，您已经学会了如何使用方差图创建一个完全声明性的、动态的、样式化的图表。 为了让你快速上手，我们在方差中省略了很多有用的功能，所以一定要亲自检查一下！
