浏览器显示后台数据_使用方差图在浏览器中更轻松地显示数据

浏览器显示后台数据

今天，我们将深入探讨方差图 ； 一种独特的基于JavaScript的“图形语法”，它提供了抽象的声明性标记样式，以创建原本相当复杂的图表。 Variance Charts位于D3.js和HighCharts之间，提供了灵活性，同时保留了平易近人的语法。

使用方差图不依赖于更深入JavaScript知识。 让我们来看看！

获取图书馆

Variance提供了一个非商业版本，通过其自己的CDN托管，您应该将其包括在页面中，如下所示：

<script src="http://variancecharts.com/cdn/variance-noncommercial-standalone-9bc0f5e.min.js" charset="UTF-8"></script>

您还需要包括一个style.css文件。 我们将不介绍HTML文件的基本设置，因为其中大多数细节都很简单。

我们的第一个图表

方差可以读取JSON和CSV； 我们将使用以下有关培根受欢迎程度的非官方CSV数据创建一个简单的条形图：

<csv id="yearly-bacons"> year,bacons 1990,20 1995,231 2000,639 2005,1625 2010,7000 2015,16000 </csv>

从这些值对中可以看出，培根正成倍地流行。 例如，对1990,20表示，培根在1990 1995流行了20 （无论意味着什么），但到1995流行度上升到231 。

但是实际上，为了直观地看到这一点，我们希望使用条形图来呈现它。 这是一个如何标记图表的示例（稍后我们将介绍各种元素）。

<div class="bacon-chart">
    <h3>Bacon data</h3> 
    <chart data="#yearly-bacons" scale-y-linear="0 20000">
        <guide-x></guide-x>
        <guide-y></guide-y>
        <repeat>
            <annotation class="bottom">{{year}}</annotation>
            <bar map-length="bacons"></bar>
        </repeat>
    </chart>
</div>

我们还需要一些附带CSS来设置图表的大小。 为此，我们将所有标记包装在<div class='container'> ，并将以下样式添加到style.css文件中：

.container {
width:50%;
margin:60px auto;
}

.container chart {
width:100%;
height:400px;
}

请注意以下几点：

• 图表标记看起来很像HTML。 实际上，Variance用于构建条形图的是有效的XML。 我们还使用了此自定义标记来包装CSV数据。 我们在chart标记中引用该CSV元素。
• scale-y-linear告诉我们y方向的比例应该是多少。 在我们的例子中，我们的数据集为16000，但最低为20。为覆盖该范围，我们将底端设置为0，将顶端设置为20000。
• guide-x / guide-y在相应的轴上创建刻度线指南。
• <repeat>遍历我们的数据并根据每个数据点创建项目。
• annotation是可以放置在诸如bar类的特定项目周围的标签。 花括号可以显示数据； 在我们的例子中， year在CSV中，因此我们可以轻松输出年份。
• bar创建一个bar元素，而map-length定义了bar bacons映射到CSV的宽度。

大！ 现在我们如何使其不那么丑陋？

样式表

要设置图表的样式，我们只需像使用CSS中的普通元素那样设置样式即可。 图表的条形元素是块级普通DOM元素，并使用flexbox定位。 我们将在CSS中添加一些样式，然后样式应如下所示。

body {
color:#3f130c;
height:100%;
font-family:sans-serif;
background-image:url(../bg.jpg);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
}

h1,h2,h3,h4 {
font-family:Tauri, sans-serif;
}

.container {
width:50%;
position:relative;
background-image:url(../bg-blur.jpg);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
margin:100px auto;
padding:100px;
}

.bacon-chart {
position:relative;
z-index:999;
}

.bacon-chart h3 {
margin:0 0 1em;
}

.container:after {
background-color:rgba(255,255,255,0.4);
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
content:"";
}

.container chart {
width:100%;
height:400px;
}

.bacon-chart bar {
background-color:rgba(96,28,18,0.7);
border:none;
}

注意：我们已经在style.css链接上方的索引文件中添加了Google字体：

<link href='http://fonts.googleapis.com/css?family=Tauri' rel='stylesheet' type='text/css'>

我们在这里包括了一些好处：可以看到在容器和主体元素之间创建了“模糊的窗口”效果。 我们利用第二个背景图像来实现这一目标。

现在，我们有了一个更有用的图表。 但是，它变得越来越好。

动画和工具提示

从栏上的一些工具提示开始，一些繁荣的时间。 为了开始，我们将为每个柱添加一个新的注释，以便我们的图表标记如下所示：

<chart data="#yearly-bacons" scale-y-linear="0 20000" scale-y-linear="1990 2015">
    <guide-x></guide-x>
    <guide-y></guide-y>
    <repeat>
        <annotation class="bottom">{{year}}</annotation>
        <annotation class="tooltip" map-position="bacons">{{bacons}}</annotation>
        <bar map-length="bacons"></bar>
    </repeat>
</chart>

之后，我们将在CSS中添加一些新样式，这些样式将允许一些有趣的悬停效果和工具提示的简单过渡：

.bacon-chart bar {
background-color:rgba(96,28,18,0.7);
border:none;
margin:0!important;
}

datum {
overflow:hidden;
}

.tooltip {
width:auto;
height:auto;
background-color:#444;
color:#fff;
opacity:0;
left:-100%;
font-size:.6em;
-webkit-transition:all .4s;
-moz-transition:all .4s;
-ms-transition:all .4s;
-o-transition:all .4s;
transition:all .4s;
padding:6px;
}

datum:hover {
background-color:rgba(255,255,255,0.1);
}

datum:hover .tooltip {
display:block;
opacity:1;
left:0;
}

动画

最后，我们希望对栏进行动画处理。我们将使用关键帧动画完成此操作：

@-webkit - keyframes barsIn {
    0 % {
        bottom: -100 % ;
    }
    100 % {
        bottom: 0;
    }
}

然后我们将其应用于我们的bar元素：

.bacon - chart bar {
    background - color: rgba(96, 28, 18, 0.7);
    margin: 0!important;
    border: none;
    height: 0; - webkit - animation: barsIn 1s;
}

这也可以使用-webkit-transform: scale( 1, 0 )类的东西来完成，但我们希望使其尽可能简单。 您还应确保根据需要添加适当的前缀。

有关方差的更多信息

Variance在解释更复杂的示例方面做得很好，并且还提供了很好的文档索引。 您会发现Variance能够进行更为复杂的可视化 。 在这里，我们将简要介绍一些要点。

Variance利用图表不同核心部分的名称来简化图表的构建，包括point ， dot ， range ， bar ， boxplot line boxplot和line 。 这些中的每一个都有自己可确定的输入。 这些都可以相互结合使用，并且可以通过repeat块以迭代方式创建。

Variance还可以使用链接的数据 ，从而允许API驱动的可视化具有动态更新的信息。

结论

今天，您已经学习了如何使用方差图创建一个完全声明性的，动画的，样式化的图。 为了使您快速入门，我们遗漏了Variance中的许多功能，因此请务必亲自检查一下！

培根照片由Flickr上的jeffreyww编辑。 知识共享2.0

翻译自: https://webdesign.tutsplus.com/tutorials/easier-visual-data-in-the-browser-with-variance-charts--cms-20819

浏览器显示后台数据