使用HTML,CSS和jQuery创建一个动画条形图

在世界各地的会议室的人爱的好图。他们去为PowerPoint,要点和短语如“跑不起来的旗杆”,“蓝天思维”和“低挂的果实”,一切始终是“向前迈进。”坚果向后是不是一个人的选项促进范式转变的时代精神。财务预测,季度销售数字和市场饱和的图是一个中间经理的梦想。

001

 

我们怎样才能为网站设计者在本热图行动得到呢?实际上有相当多的方式在Web上显示的图形。我们可以简单地创建一个图像,它钉到一个网页。但是,这不是十分便利或有趣的。我们可以使用Flash,这是相当不错的显示图形-但再次,交通十分便利。此外,设计师,开发商和神闹翻爱与Flash。如HTML5技术,而不需要一个插件可以做同样的事情很多。新的HTML5 <canvas>元素,甚至可以适应的任务。在线上,我们可能会使用大量的图表工具。但是,如果我们想要的东西一点点更适合呢?

有利弊,以提供给我们的资源广泛,但本教程不会探索所有。相反,我们将建立我们的图形使用,逐步增强对CSS3和jQuery洒。因为我们可以。
我们有什么呢?

我们正在做的这一点。和更多!这里是你如何能延长在本教程中的技术探索一些可能性:

一个进度条表明多久,直到所有人类活动中的僵尸瘟疫结束;

一个图表示,在安全的户外活动,在僵尸瘟疫的下降;

一个可怕的类似的图,说明在礼仪在僵尸瘟疫的下降;

FarmVille的谁不知道僵尸瘟疫,因为他们与他们现在死者Facebook上的朋友,他们做的所有共享的人增加。

或者你可以创建一个图形或配额的酒吧,只是说明了一些有用的东西,那么充满恐惧和僵尸。所以,让我们用它。

你需要什么

文本或HTML编辑器任你选 ;许多人在那里。

jQuery的。实行安全脚本,并获得最新的一个。保持开放的jQuery网站,所以,你可以看看文档,当您去。

可能是一个图像编辑器,如油漆,嘲笑你的图看起来像什么。

一个现代和体面的Web浏览器预览更改。

应该这样做。请注意,本教程不介绍任何的HTML,CSS,jQuery或僵尸设计。假定这三个技术和不死的一些中级知识。

马克

你可以创建一个图在许多方面的基础HTML。在本教程中,我们将开始一个表,因为它会使JavaScript或CSS视觉,如果不应用最有意义的。这是一个在无障碍列大对号。

快!你刚刚得到一些惊人的数字。鞣僵尸的人口预计将在未来几年失控。碳老虎和蓝色的猴子都受到直接威胁。然后鞣制的僵尸可能会来为我们。但是,你只是一个设计师。什么,你可能可以做些什么来帮助吗?

我知道了!你可以做一个网页,说明我们不错,平静,顺利的动画图形的殒落!

开始,让我们把这个数据到一个表每年,不同品种的行列。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=1024">
<title>Example 01: No CSS</title>
</head>

<body>
<p id="wrapper">
<p class="chart">
<h3>Population of endangered species from 2012 to 2016</h3>
<table id="data-table" border="1" cellpadding="10" cellspacing="0"
summary="The effects of the zombie outbreak on the populations
of endangered species from 2012 to 2016">
<caption>Population in thousands</caption>
<thead>
<tr>
<td> </td>
<th scope="col">2012</th>
<th scope="col">2013</th>
<th scope="col">2014</th>
<th scope="col">2015</th>
<th scope="col">2016</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Carbon Tiger</th>
<td>4080</td>
<td>6080</td>
<td>6240</td>
<td>3520</td>
<td>2240</td>
</tr>
<tr>
<th scope="row">Blue Monkey</th>
<td>5680</td>
<td>6880</td>
<td>6240</td>
<td>5120</td>
<td>2640</td>
</tr>
<tr>
<th scope="row">Tanned Zombie</th>
<td>1040</td>
<td>1760</td>
<td>2880</td>
<td>4720</td>
<td>7520</td>
</tr>
</tbody>
</table>
</p>
</p>
</body>
</html>

查看下面的例子中看到它的外观裸体,没有CSS或JavaScript应用。本表中的可访问将使人们使用屏幕阅读器,以了解数据和底层的消息,这是“为您的生活运行!”

002

 

容易的部分是现在的方式。现在,让我们进军的CSS和JavasScript电源(通过jQuery)真正说明什么数字都在告诉我们的。技术上,我们的目标是创建一个图形工作在所有的现代浏览器从IE 8上。

我说所有的现代浏览器?IE 8是幸运的,它得到挂凉爽的孩子。支持CSS3的浏览器会得到一些额外的洒。

“结合你的力量……”

如果你想召唤地球超人,你可能 有 其他地方看看。如果您想了解如何结合CSS和jQuery创建一个图表,说明我们即将到来的厄运,在越来越多的人更喜欢动脑筋古铜色的僵尸军队的手中,然后阅读。

首先要做的是一些基本的CSS风格与我们的餐桌。这是一个很好的安全网人尚未启用在他们的浏览器的JavaScript。

003

 

在jQuery入门

我们将使用jQuery来创建我们的飞图,从原始数据表分开。要做到这一点,我们需要得到的数据表和存储在一个更实用的格式。然后,我们可以添加到我们的文档使用此数据,以构建我们的图形的新元素。

我们的创造我们的主要的开始createGraph()函数。我简称这个函数的内部运作,让你得到一个结构清晰的画面。不要忘记:你总是可以参考本教程的源代码。

下面是我们的基本结构:

// Wait for the DOM to load everything, just to be safe
$(document).ready(function() {

// Create our graph from the data table and specify a container to put the graph in
createGraph('#data-table', '.chart');

// Here be graphs
function createGraph(data, container) {
// Declare some common variables and container elements
…

// Create the table data object
var tableData = {
…
}

// Useful variables to access table data
…

// Construct the graph
…

// Set the inpidual heights of bars
function displayGraph(bars) {
…
}

// Reset the graph's settings and prepare for display
function resetGraph() {
…
displayGraph(bars);
}

// Helper functions
…

// Finally, display the graph via reset function
resetGraph();
}
});

我们通过这个函数有两个参数:

数据中的一种形式,表中的元素;

一个容器元素,我们希望把我们在文档中的图形。

下一步,我们将宣布一些变量来管理我们的数据和容器中的元素,再加上一些动画的定时器变量。下面的代码:

// Declare some common variables and container elements
var bars = [];
var figureContainer = $('<p id="figure"></p>');
var graphContainer = $('<p class="graph"></p>');
var barContainer = $('<p class="bars"></p>');
var data = $(data);
var container = $(container);
var chartData;
var chartYMax;
var columnGroups;

// Timer variables
var barTimer;
var graphTimer;

没有什么太令人兴奋,但这些将是非常有用的。

获取数据

除了 ??简单的数据显示,良好的条形图应该有一个漂亮的大标题,清楚地标示轴和颜色编码的传说。我们需要剥离的数据表和图中的更有意义的方式,是在格式化。要做到这一点,我们将创建一个JavaScript对象,我们的数据存储在方便的小功能。让生  出我们的tableData {}对象的:

// Create table data object
var tableData = {
// Get numerical data from table cells
chartData: function() {
…
},
// Get heading data from table caption
chartHeading: function() {
…
},
// Get legend data from table body
chartLegend: function() {
…
},
// Get highest value for y-axis scale
chartYMax: function() {
…
},
// Get y-axis data from table cells
yLegend: function() {
…
},
// Get x-axis data from table header
xLegend: function() {
…
},
// Sort data into groups based on number of columns
columnGroups: function() {
…
}
}

我们这里有几个功能,它们在代码的注释解释。他们中的大多数都颇为相似,所以我们并不需要通过每一个去。相反,我们的挑除其中一人,columnGroups:

// Sort data into groups based on number of columns
columnGroups: function() {
var columnGroups = [];
// Get number of columns from first row of table body
var columns = data.find('tbody tr:eq(0) td').length;
for (var i = 0; i < columns; i++) {
columnGroups = [];
data.find('tbody tr').each(function() {
columnGroups.push($(this).find('td').eq(i).text());
});
}
return columnGroups;
}

下面是它打破了:

创建在columnGroups []数组来存储数据;

在第一行中获取列数计数表细胞(TD);

对于每一列,找到的行数,在表体(TBODY),并创建另一个数组存储单元数据表;

然后遍历每一行,并抓住每个单元格(通过jQuery的数据文本()函数),然后将它添加到表格单元格数据数组。

一旦我们的目标是充分多汁的数据,我们可以开始创建的元素,使我们的图形。

使用数据

使用jQuery $。每一个功能,我们现在可以通过我们的数据在任何时候,循环和创造的元素,使我们的图形。其中一个棘手位插入酒吧内每年列表示每个物种。

下面的代码:

// Loop through column groups, adding bars as we go
$.each(columnGroups, function(i) {
// Create bar group container
var barGroup = $('<p class="bar-group"></p>');
// Add bars inside each column
for (var j = 0, k = columnGroups.length; j < k; j++) {
// Create bar object to store properties (label, height, code, etc.) and add it to array
// Set the height later in displayGraph() to allow for left-to-right sequential display
var barObj = {};
barObj.label = this[j];
barObj.height = Math.floor(barObj.label / chartYMax * 100) + '%';
barObj.bar = $('<p class="bar fig' + j + '"><span>' + barObj.label + '</span></p>')
.appendTo(barGroup);
bars.push(barObj);
}
// Add bar groups to graph
barGroup.appendTo(barContainer);
});

不包括标题,我们的表中有三行五列。对于我们的图形,这意味着我们每列创建,3个酒吧将出现在该列。下图显示了我们将构造图:

004

 

打破它:

对于每一列,创建一个容器 p ;

环路内每列,行和单元格数据;

创建存储的属性,每个标签,高度和标记,如酒吧,酒吧的对象(barObj {});

添加标记属性列,应用一个CSS类图“。+ J颜色代码列在每个酒吧,在包装标签的跨度 ;

添加到我们的对象酒吧[]数组,这样我们就可以访问数据;

拼凑一起列添加到一个容器元素。

积分如果你注意到,我们没有设置高度的酒吧。这是使我们以后有更多的控制如何显示的酒吧。

现在,我们有我们的酒吧,让我们的工作,我们的图形标签。因为代码显示的标签是颇为相似,通过它你会说没有必要。下面是我们如何显示y轴:

// Add y-axis to graph
var yLegend = tableData.yLegend();
var yAxisList = $('<ul class="y-axis"></ul>');
$.each(yLegend, function(i) {
var listItem = $('<li><span>' + this + '</span></li>')
.appendTo(yAxisList);
});
yAxisList.appendTo(graphContainer);

这打破了如下:

获取相关表中的数据为我们的标签,

创建一个无序列表(UL),包含列表项;

循环通过标签数据,并创建一个列表项(李为每个标签),在每个包装标签跨度 ;

列表项附加到我们的清单;

最后,将一个容器元素的列表。

重复这一技术,我们可以添加的传说中,x轴标签,我们的图形和标题。

我们才可以显示我们的图中,我们需要确保我们所做的一切将被添加到我们的容器元素。

// Add bars to graph
barContainer.appendTo(graphContainer);

// Add graph to graph container
graphContainer.appendTo(figureContainer);

// Add graph container to main container
figureContainer.appendTo(container);

显示数据

所有剩下的做jQuery中设置的每个条的高度。这是在我们前面的工作,储存在一个酒吧对象的height属性,会派上用场。

我们将我们的图形动画顺序,逐个POR UNO,UNO。

一个可行的办法是使用一个回调函数,当最后一个动画完成动画下吧。然而,图表会时间太长的动画。相反,我们的图表将使用定时器功能,显示经过一段时间的一定数额的每一个酒吧,不管多久,每个酒吧都需要增长。拉德!

这里displayGraph()函数:

// Set the inpidual height of bars
function displayGraph(bars, i) {
// Changed the way we loop because of issues with $.each not resetting properly
if (i < bars.length) {
// Animate the height using the jQuery animate() function
$(bars.bar).animate({
height: bars.height
}, 800);
// Wait the specified time, then run the displayGraph() function again for the next bar
barTimer = setTimeout(function() {
i++;
displayGraph(bars, i);
}, 100);
}
}

你说什么?“你为什么不使用美元。每个像你这样的功能,在其他地方吗?“问得好。首先,让我们讨论的displayGraph()函数做什么,那么,为什么它是事情是这样的。

displayGraph()函数接受两个参数:

通过循环的酒吧,

索引(一)从开始迭代(在开始0)。

让其余打破:

如果我的价值是小于酒吧,然后继续前进;

获取当前的酒吧,我从使用的值的数组;

动画height属性(以百分比计算和存储酒吧的高度。);

等待100毫秒;

增加我 1和重复下吧。

“那么,为什么你不只是使用,每个功能延迟()之前的动画吗?“

你可以和它会工作得很好…第一次。但是如果你试图通过“重置图形”按钮来重置动画,然后定时事件不会清除正确和酒吧将动画序列。

我想被证明是错误的,如果有一个更好的办法做到这一点,随意声音在评论部分。

上移动,这里resetGraph() :

// Reset graph settings and prepare for display
function resetGraph() {
// Stop all animations and set the bar's height to 0
$.each(bars, function(i) {
$(bars.bar).stop().css('height', 0);
});

// Clear timers
clearTimeout(barTimer);
clearTimeout(graphTimer);

// Restart timer
graphTimer = setTimeout(function() {
displayGraph(bars, 0);
}, 200);
}

让我们向下突破resetGraph() :

停止所有动画,并设置每个酒吧回0的高度;

清除定时器,以便有没有流浪的动画;

等待200毫秒;

呼叫displayGraph()动画的第一条(在索引0)。

最后,调用resetGraph()在的底部createGraph() ,并观看魔术发生,因为我们在我们努力工作的荣耀晒。

没有这么快,阳光!之前,我们再往前走,我们需要把一些衣服。

CSS

我们需要做的第一件事是隐藏的原始数据表。我们在许多方面可以做,但因为我们的CSS将加载的JavaScript之前,让我们做最简单的方法可能:

#data-table {
display: none;
}

完成。让我们创造一个很好的容器面积,把我们的图形。因为一些无序列表被用来使我们的图,我们还将为那些重置样式。给#数字和图形元素位置相对是很重要的,因为它会停泊的地方元素,正是我们希望在这些容器。

/* Containers */

#wrapper {
height: 420px;
left: 50%;
margin: -210px 0 0 -270px;
position: absolute;
top: 50%;
width: 540px;
}

#figure {
height: 380px;
position: relative;
}

#figure ul {
list-style: none;
margin: 0;
padding: 0;
}

.graph {
height: 283px;
position: relative;
}

现在的传奇。我们下降到其容器的底部(#图)和线项目水平定位的传说:

/* Legend */

.legend {
background: #f0f0f0;
border-radius: 4px;
bottom: 0;
position: absolute;
text-align: left;
width: 100%;
}

.legend li {
display: block;
float: left;
height: 20px;
margin: 0;
padding: 10px 30px;
width: 120px;
}

.legend span.icon {
background-position: 50% 0;
border-radius: 2px;
display: block;
float: left;
height: 16px;
margin: 2px 10px 0 0;
width: 16px;
}

x轴是非常类似的传说。我们排队元素的水平和他们锚定到其容器的底部(图):

/* x-axis */

.x-axis {
bottom: 0;
color: #555;
position: absolute;
text-align: left;
width: 100%;
}

.x-axis li {
float: left;
margin: 0 15px;
padding: 5px 0;
width: 76px;
}

 

y轴是一个小更复杂的,需要过关的情侣。我们给它一个位置:绝对打破了它的正常流动的内容,但锚定到其容器的。我们伸出每个李全图宽度,并添加一个横跨顶部的边框。这将使我们在后台的一些漂亮的水平线。

使用负利润的权力,我们就可以抵消跨度内的数值的标签,使他们转移和左侧。可爱!

/* y-axis */

.y-axis {
color: #555;
position: absolute;
text-align: right;
width: 100%;
}

.y-axis li {
border-top: 1px solid #ccc;
display: block;
height: 62px;
width: 100%;
}

.y-axis li span {
display: block;
margin: -10px 0 0 -60px;
padding: 0 10px;
width: 40px;
}

现在在我们的濒危物种夹心肉:酒吧本身。让我们开始与容器元素的酒吧和列:

/* Graph bars */

.bars {
height: 253px;
position: absolute;
width: 100%;
z-index: 10;
}

.bar-group {
float: left;
height: 100%;
margin: 0 15px;
position: relative;
width: 76px;
}

这里没有什么复杂。我们只是设置一些尺寸的容器,并设置z-index进行,以确保它出现在前面的Y轴标记。

现在每个人的酒吧:

.bar {
border-radius: 3px 3px 0 0;
bottom: 0;
cursor: pointer;
height: 0;
position: absolute;
text-align: left;
width: 24px;
}

.bar.fig0 {
left: 0;
}

.bar.fig1 {
left: 26px;
}

.bar.fig2 {
left: 52px;
}

这里要注意的主要风格是:

位置:绝对底部:0,这意味着,酒吧将连接到我们的图的底部,并成长起来;

每个物种的酒吧(fig0,图1和图2),将在定位杆组。

现在,为什么我们不能最大限度地减少使用任何给定页面上的尖 ??锐边缘的边界半径财产周围每个栏的左上角和右上角的角落的边缘?OK,所以边界半径是不是真的有必要,但它增加了一个很好的接触为支持它的浏览器。值得庆幸的是,最流行 ??的浏览器的最新版本不支持它。

因为我们已经摆在每个酒吧的每个表单元格的值,我们可以添加一个整洁的小弹出时出现徘徊在一个酒吧:

.bar span {
#fefefe url(../images/info-bg.gif) 0 100% repeat-x;
border-radius: 3px;
left: -8px;
display: none;
margin: 0;
position: relative;
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
width: 40px;
z-index: 20;

-webkit-box-shadow: rgba(0, 0, 0, 0.6) 0 1px 4px;
box-shadow: rgba(0, 0, 0, 0.6) 0 1px 4px;
}

.bar:hover span {
display: block;
margin-top: -25px;
}

首先,在弹出的隐藏视图通过显示:无。然后,酒吧元素上空盘旋时,我们已经设置显示:块把它进入视野,并设置一个负的保证金顶,使其出现上述各酒吧。

文本阴影,RGBA和阴影框的属性,目前支持大多数现代浏览器。这些现代的浏览器,Safari浏览器需要供应商的前缀(WebKit的),使箱阴影工作。请注意,这些属性是仅仅增强我们的图形,并不需要了解它。我们的Internet Explorer 8的基准完全忽略他们。

我们一起在把一切的最后一步是每个栏颜色代码:

.fig0 {
background: #747474 url(../images/bar-01-bg.gif) 0 0 repeat-y;
}

.fig1 {
background: #65c2e8 url(../images/bar-02-bg.gif) 0 0 repeat-y;
}

.fig2 {
background: #eea151 url(../images/bar-03-bg.gif) 0 0 repeat-y;
}

在这个例子中,我只需添加一个背景颜色和一个背景形象,瓷砖垂直。这将更新,代表他们在传说中的酒吧和小图标的样式。很高兴。

并相信它或没有,那就是它了!

005

 

成品

大约包装起来。我希望我们做得还不够,提醒市民僵尸人口过多的危险。然而,更重要的是,我希望你已经获得了从本教程有用的东西,你会继续推什么可以在浏览器中完成的界限-尤其是适当的Web标准,并没有使用第三方插件插件。如果你有想法就如何扩大或改善你在这里看到,不犹豫下面发表评论,或者在Twitter找到我derek_mack @。

奖励:释放对CSS3的力量

这奖金不详述作为我们主要的例子。它主要作为展示CSS3规范正在考虑的一些功能。

因为目前仅限于支持CSS3属性,因此其使用。虽然这里提到的一些功能到其他Web浏览器的方式,如苹果Safari和谷歌Chrome基于Webkit的领导方式。

事实上,我们可以创造我们的图形,使用在所有没有图像,甚至使用CSS而不是jQuery的动画酒吧。

让我们开始从我们酒吧的背景图像,取代他们与WebKit的梯度属性:

.fig0 {
background: -webkit-gradient(linear, left top, right top, color-stop(0.0, #747474), color-stop(0.49, #676767), color-stop(0.5, #505050), color-stop(1.0, #414141));
}

.fig1 {
background: -webkit-gradient(linear, left top, right top, color-stop(0.0, #65c2e8), color-stop(0.49, #55b3e1), color-stop(0.5, #3ba6dc), color-stop(1.0, #2794d4));
}

.fig2 {
background: -webkit-gradient(linear, left top, right top, color-stop(0.0, #eea151), color-stop(0.49, #ea8f44), color-stop(0.5, #e67e28), color-stop(1.0, #e06818));
}

我们可以做我们的小号码的弹出窗口是相同的:

.bar span {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #fff), color-stop(1.0, #e5e5e5));
…
}

欲了解更多信息Webkit的梯度,检查出的SURFIN的Safari博客。

继续弹出窗口,让我们介绍WebKit的过渡。CSS过渡是非常容易使用和理解。当浏览器检测到一个元素的属性的变化(高度,宽度,颜色,透明度等),它会过渡到新的属性。

再次,是指SURFIN更多信息WebKit的过渡和CSS3动画的Safari。

下面是一个例子:

.bar span {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #fff), color-stop(1.0, #e5e5e5));
display: block;
opacity: 0;

-webkit-transition: all 0.2s ease-out;
}

.bar:hover span {
opacity: 1;
}

当你悬停在酒吧,在弹出的保证金和透明度将改变。根据我们所设置的属性,这会触发一个过渡事件。非常冷静。

感谢WebKit的过渡,我们可以简化我们的JavaScript功能位:

// Set inpidual height of bars
function displayGraph(bars, i) {
// Changed the way we loop because of issues with $.each not resetting properly
if (i < bars.length) {
// Add transition properties and set height via CSS
$(bars.bar).css({'height': bars.height, '-webkit-transition': 'all 0.8s ease-out'});
// Wait the specified time, then run the displayGraph() function again for the next bar
barTimer = setTimeout(function() {
i++;
displayGraph(bars, i);
}, 100);
}
}
// Reset graph settings and prepare for display
function resetGraph() {
// Set bar height to 0 and clear all transitions
$.each(bars, function(i) {
<strong>$(bars.bar).stop().css({'height': 0, '-webkit-transition': 'none'});</strong>
});

// Clear timers
clearTimeout(barTimer);
clearTimeout(graphTimer);

// Restart timer
graphTimer = setTimeout(function() {
displayGraph(bars, 0);
}, 200);
}

这里是主要的事情,我们已经改变:

通过jQuery的酒吧设置的高度CSS()函数,并允许CSS过渡动画的照顾;

当重置图形,转向过渡,使酒吧的高度,立即被设置为0。

退房的例子,如果你有安装Safari或Chrome的最新版本。

超百万的WEBKIT奖励:现在的3-D!

对于一个什么样的未来持有先睹为快,检查出了一个小实验,我放在一起,用3-D效果和CSS转换。再次,它需要的Safari或Chrome的最新版本:

正如我们在以前的Webkit的例子,有没有图像,所有的动画是通过CSS处理。亲亲我的脸!

我不能告诉你做什么,所有这些信息。不过,我提醒你关于您的新权力可能被滥用。在我们的朋友上尉行星的话,“权力是你的!”

明智地使用它。

 

本例下载:http://pan.baidu.com/share/link?shareid=68286&uk=2535789224

英文原文:http://coding.smashingmagazine.com/2011/09/23/create-an-animated-bar-graph-with-html-css-and-jquery