Advertisement
  1. Web Design
  2. HTML & CSS

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

Scroll to top
Read Time: 2 min

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

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

使用方差图不需要有深奥的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表明培根是在199020流行度(不管那意味着什么),但是在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 )实现,但我们希望它能尽可能保持简洁。 你还应该确保在必要时添加适当的前缀。

进一步认识方差

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

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

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

结论

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

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

关注我们的公众号
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.