用CSS做个柱形图

POSTED AT: 2009-05-17 15:01:16 UTC | POSTED IN: CSS/JS/AS | 34 COMMENTS

一时来了兴致，也想学习下CSS了，把《Head First HTML & CSS & XHTML》看了一遍，才发现写网页也是这么有乐趣，比写后台代码爽多了。在Meyer的网页上看到可以用CSS来画图表，真是太神奇了（或许对那些有经验的人来说不神奇，可ABitNo是刚开始学习的）。先看看效果图

你能不被被这效果给征服吗？我们一起来看看实现传奇的代码吧

首先是HTML代码

<ul id="q-graph">

<li class="qtr" id="q1">Q1
<ul>
<li class="sent bar" style="height: 111px;"><p>$18,450.00</p></li>
<li class="paid bar" style="height: 99px;"><p>$16,500.00</p></li>
</ul>
</li>

<li class="qtr" id="q2">Q2
<ul>
<li class="sent bar" style="height: 206px;"><p>$34,340.72</p></li>
<li class="paid bar" style="height: 194px;"><p>$32,340.72</p></li>
</ul>
</li>

<li class="qtr" id="q3">Q3
<ul>
<li class="sent bar" style="height: 259px;"><p>$43,145.52</p></li>
<li class="paid bar" style="height: 193px;"><p>$32,225.52</p></li>
</ul>
</li>

<li class="qtr" id="q4">Q4
<ul>
<li class="sent bar" style="height: 110px;"><p>$18,415.96</p></li>
<li class="paid bar" style="height: 195px;"><p>$32,425.00</p></li>
</ul>
</li>

<li id="ticks">
<div class="tick" style="height: 59px;"><p>$50,000</p></div>
<div class="tick" style="height: 59px;"><p>$40,000</p></div>
<div class="tick" style="height: 59px;"><p>$30,000</p></div>
<div class="tick" style="height: 59px;"><p>$20,000</p></div>
<div class="tick" style="height: 59px;"><p>$10,000</p></div>
</li>

</ul>

接下来是CSS代码

#q-graph {
    position: relative;
    width: 600px;
    height: 300px;
    margin: 1.1em 0 3.5em;
    padding: 0;
    background: #DDD url(fade-light.png) repeat-x;
    border: 2px solid gray;
    list-style: none;
    font: 9px Helvetica, Geneva, sans-serif;
}
#q-graph ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#q-graph li {
    position: absolute;
    bottom: 0;
    width: 150px;
    z-index: 2;
    margin: 0;
    padding: 0;
    text-align: center;
    list-style: none;
}
#q-graph li.qtr {
    height: 298px;
    padding-top: 2px;
    border-right: 1px dotted #C4C4C4;
    color: #AAA;
}
#q-graph li.bar {
    width: 60px;
    border: 1px solid;
    border-bottom: none;
    color: #000;
}
#q-graph li.bar p {
    margin: 5px 0 0;
    padding: 0;
}
#q-graph li.sent {
    left: 13px;
    background: #DCA url(fade-dark.png) repeat-x;
    border-color: #EDC #BA9 #000 #EDC;
}
#q-graph li.paid {
    left: 77px;
    background: #9D9 url(fade-dark.png) repeat-x;
    border-color: #CDC #9B9 #000 #BFB;
}
#q-graph #q1 {
    left: 0;
}
#q-graph #q2 {
    left: 150px;
}
#q-graph #q3 {
    left: 300px;
}
#q-graph #q4 {
    left: 450px;
    border-right: none;
}

#q-graph #ticks {
    width: 600px;
    height: 300px;
    z-index: 1;
}
#q-graph #ticks .tick {
    position: relative;
    border-bottom: 1px solid #BBB;
    width: 600px;
}
#q-graph #ticks .tick p {
    position: absolute;
    left: 100%;
    top: -0.67em;
    margin: 0 0 0 0.5em;
}

这是Meyer网站上文章的地址
http://meyerweb.com/eric/css/edge/bargraph/demo.html

本文基于署名-非商业性使用-禁止演绎 2.5 中国大陆发布

34 COMMENTS >>LEAVE<<

>>REPLY<< 海贼阿D on 2009-05-17 at 17:40

ABitNo，你还真什么都整啊！真的是名不虚传，^_^
>>REPLY<< doyle on 2009-05-18 at 01:33

话说...这个叫柱状图...
>>REPLY<< 半凉气候 on 2009-05-18 at 03:06

漂亮！
>>REPLY<< ABitNo on 2009-05-18 at 04:51
@doyle
谢谢。。。
>>REPLY<< ABitNo on 2009-05-18 at 04:55
@海贼阿D
略懂一点。。。
>>REPLY<< ABitNo on 2009-05-18 at 08:38
@半凉气候
什么东西给那些天才都能变成宝。。。
>>REPLY<< tmdab123 on 2009-05-18 at 12:20

厉害厉害
我就知道ＣＳ　哈哈哈　
>>REPLY<< ABitNo on 2009-05-18 at 12:23
@tmdab123
人家可是专家。。。我是菜鸟。。。
>>REPLY<< 世界娱乐网 on 2009-05-18 at 18:36

你好。我看到你在我的博客里留言说不相信那种点击广告赚钱的做法。
其实那是可信的。因为那也是广告业的一种形式，在国外非常流行。因此有人在点击并读了那些广告后，会去购买广告里所说的产品或服务（这种情况主要是在国外），因此推销商就因此获利了。所以这种做广告的方法其实是很现实的。
我介绍的那种只是其中的一种。你注册以后，它每天给你发10个左右的广告，每点击一个赚一美分。这样每天就可以赚0.1美元左右。虽然不多，但这只需要你动动鼠标，全部工作在3分钟内就可以完成了。如果你能同时做更多这样的网上冲浪的话，每天是可以有一笔比较稳当的收入的。更主要的是，这样的注册是完全免费的，不需要你花一分钱。
建议你试试看就知道了。如果你注册了，我可以教你具体怎样去做。呵呵
>>REPLY<< ABitNo on 2009-05-18 at 18:43
@世界娱乐网
谢谢你啊，原来是这样，我去看看。。。你这么晚了也还没睡啊。。。
>>REPLY<< TualatriX on 2009-05-19 at 05:08

好文章！受益了。
我也要学习CSS！
加油啊～ABitNo，你学东西真是太快了！
>>REPLY<< ABitNo on 2009-05-19 at 05:20
@TualatriX
哈哈，谢谢TX。。。
现在正在做一个WordPress的主题，超级简洁型的，昨天晚上一晚上没睡觉。。。竟然还不困。。。
>>REPLY<< cheung on 2009-05-19 at 08:19

邀请您加入博客爱好者，展示你的博客
收录中http://im.bokefan.cn/
优秀博客一网打尽。
>>REPLY<< 海贼阿D on 2009-05-20 at 05:35
@世界娱乐网
这样啊！我也去看看！
>>REPLY<< 海贼阿D on 2009-05-20 at 05:36

AbitNo，怎么换主题了，这个主题好干净，好简洁，朴素得有些过了啊！
>>REPLY<< 海贼阿D on 2009-05-20 at 05:37
@TualatriX
大名鼎鼎的Tualatrix都来这里了，AbitNo不错嘛！
>>REPLY<< 阿祠 on 2009-05-20 at 05:38

都是搞网络的，做个链接，以后多交流^_^
>>REPLY<< ABitNo on 2009-05-20 at 05:39
@海贼阿D
哈哈！这是我自己做的。。。还没细细完善。。。
>>REPLY<< ABitNo on 2009-05-20 at 05:41
@阿祠
好啊，我先有事，回来就加上。。。
>>REPLY<< ABitNo on 2009-05-20 at 05:43
@海贼阿D
哈哈，谢谢大伙支持。。。
>>REPLY<< Moligaloo on 2009-05-20 at 10:14

这个应该叫直方图吧
>>REPLY<< ABitNo on 2009-05-20 at 10:30
@Moligaloo
。。。我现在是真的不知道了。。。
>>REPLY<< 海贼阿D on 2009-05-21 at 02:01
@海贼阿D
AbitNo，你确实牛，我很佩服你
>>REPLY<< ABitNo on 2009-05-21 at 06:20
@海贼阿D
谢谢你啊。。。不过我只是个刚刚起飞的菜鸟。。
>>REPLY<< luansheng on 2009-05-21 at 07:33

画个图都这么麻烦，用R就一个Hist就出来了。程序员真累啊
>>REPLY<< ABitNo on 2009-05-21 at 07:40
@luansheng
不错。。。是相当的累。。。不过也相当的幸福。。。
>>REPLY<< Moligaloo on 2009-05-21 at 08:51

关于在网页上显示这类图形，如果用JS的话，可以用JSChart，如果用Flash的话可以用Open Flash Chart
>>REPLY<< ABitNo on 2009-05-21 at 09:17
@Moligaloo
这种东西还没研究过，等自己做网站的时候再研究下。。。
>>REPLY<< keelii on 2009-06-03 at 11:36

最近很流行这个^!^
>>REPLY<< ABitNo on 2009-06-05 at 07:06
@keelii
是啊，CSS正在强大着。。。
>>REPLY<< Ludou on 2009-06-05 at 15:10

好好学，继续努力，坚持下来才会成功。其实这些都是简单的东西，PHP等服务器端编程才是有些挑战性的东西，前台配合JS会获得更好的效果，但是JS这东西又不是那么好学的啊，哎！
>>REPLY<< ABitNo on 2009-06-05 at 15:49
@Ludou
我感觉server端的更简单，做一个优秀的前端我怎么也完成不了。。。
不过这几天JavaFX的Linux版刚出来，又有的学了。。。
>>REPLY<< xifs on 2009-08-19 at 15:16

唉..最近也在研究这些..
囧的是..前端后台都要研究..真的忙不过来阿
>>REPLY<< ABitNo on 2009-08-19 at 16:03
@xifs
我现在非常兴奋。。。
那本Agile Web Development With Rails总算是被我看完了。。。
发现用Rails的话，也不怎么用学前端技术，真的是一个人学一下Ruby就行了，什么东西都是Ruby代码。。。

A Bit? No!!!

用CSS做个柱形图

34 COMMENTS >>LEAVE<<

LEAVE A RESPONSE >>CANCEL<<

CATEGORIES

TAG CLOUD