神马文学网CSS For Bar Graphs
来源：百度文库 编辑：神马文学网 时间：2024/09/21 11:07:48
CSS For Bar Graphs
November 21, 2005
Havinga working knowledge of XHTML and CSS when developing applications is abig help in knowing what can be done client-side and what should begenerated server-side.
Recentlywe’ve had to tackle some interesting visualizations which we coded inXHTML and CSS. The method we used, while fairly simple, was a big helpto the engineer and created a very flexible and inexpensive solution.We thought we would share our solution and code in case anyone else ranagainst similar situations.
Update
I posted a live example page with everything in tact. So far I’veonly been able to test in Firefox 1.0.7, Firefox 1.5, IE 6, Safari1.3.3, and Opera 9(TP1). You can view it here.
Basic CSS Bar Graph
This is a simple bar graph we developed for a tool we’re releasingshortly for our client. The concept is simple, utilize the percentagewidth abilities of CSS to accurately portray a percentage bar graph.
24%Complex CSS Bar Graph
This is a more complex visualization, yet still following the samebasic idea. Here the graph is a ‘bad’ to ‘good’ indicator with a markerthat travels the length of the color scheme. A lighter bar shade alsohelps indicate the marker position as it travels from left to right.
- Love Life
- 25%
- Education
- 55%
- War Craft 3 Rank
- 75%
Vertical CSS Bar Graph
In this third example, we utilize the same principle vertically andreproduce it multiple times to create a more complex graph. Thisparticular solution was a relief the to client and engineer as all theyhad to do was calculate percentages, and the look of the graph was muchbetter than their stock graphing component.
- 22
- 7
- 3
- 8
- 2