zoukankan      html  css  js  c++  java
  • CSS For Bar Graphs(maybe old)

    Having a working knowledge of XHTML and CSS when developing applications
    is a big help in knowing what can be done client-side and what should be
    generated server-side.

    Recently we’ve had to tackle some interesting visualizations which we coded in XHTML and CSS. The method we used, while fairly simple, was a big help to the engineer and created a very flexible and inexpensive solution. We thought we would share our solution and code in case anyone else ran against similar situations.

    Update

    I posted a live example page with everything in tact. So far I’ve only been able to test in Firefox 1.0.7, Firefox 1.5, IE 6, Safari 1.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 releasing shortly for our client. The concept is simple, utilize the percentage width abilities of CSS to accurately portray a percentage bar graph.

    <style>
        dl { 
            margin: 0; 
            padding: 0;                     
        }
        dt { 
            position: relative; /* IE is dumb */
            clear: both;
            display: block; 
            float: left; 
            width: 104px; 
            height: 20px; 
            line-height: 20px;
            margin-right: 17px;              
            font-size: .75em; 
            text-align: right; 
        }
        dd { 
            position: relative; /* IE is dumb */
            display: block;                 
            float: left;     
            width: 197px; 
            height: 20px; 
            margin: 0 0 15px; 
            background: url("g_colorbar.jpg"); 
         }
         * html dd { float: none; } 
        /* IE is dumb; Quick IE hack, apply favorite filter methods for 
        wider browser compatibility */
    
         dd div { 
            position: relative; 
            background: url("g_colorbar2.jpg"); 
            height: 20px; 
            width: 75%; 
            text-align:right; 
         }
         dd div strong { 
            position: absolute; 
            right: -5px; 
            top: -2px; 
            display: block; 
            background: url("g_marker.gif"); 
            height: 24px; 
            width: 9px; 
            text-align: left;
            text-indent: -9999px; 
            overflow: hidden;
         }
    </style>
    <dl>
        <dt>Love Life</dt>
        <dd>
            <div style="25%;"><strong>25%</strong></div>
        </dd>
        <dt>Education</dt>
        <dd>
            <div style="55%;"><strong>55%</strong></div>
        </dd>
        <dt>War Craft 3 Rank</dt>
        <dd>
            <div style="75%;"><strong>75%</strong></div>
        </dd>
    </dl>

    Vertical CSS Bar Graph

    In this third example, we utilize the same principle vertically and reproduce it multiple times to create a more complex graph. This particular solution was a relief the to client and engineer as all they had to do was calculate percentages, and the look of the graph was much better than their stock graphing component.

    <style>
        #vertgraph {                    
            width: 378px; 
            height: 207px; 
            position: relative; 
            background: url("g_backbar.gif") no-repeat; 
        }
        #vertgraph ul { 
            width: 378px; 
            height: 207px; 
            margin: 0; 
            padding: 0; 
        }
        #vertgraph ul li {  
            position: absolute; 
            width: 28px; 
            height: 160px; 
            bottom: 34px; 
            padding: 0 !important; 
            margin: 0 !important; 
            background: url("g_colorbar3.jpg") no-repeat !important;
            text-align: center; 
            font-weight: bold; 
            color: white; 
            line-height: 2.5em;
        }
    
        #vertgraph li.critical { left: 24px; background-position: 0px bottom !important; }
        #vertgraph li.high { left: 101px; background-position: -28px bottom !important; }
        #vertgraph li.medium { left: 176px; background-position: -56px bottom !important; }
        #vertgraph li.low { left: 251px; background-position: -84px bottom !important; }
        #vertgraph li.info { left: 327px; background-position: -112px bottom !important; }
    </style>
    <div id="vertgraph">
        <ul>
            <li class="critical" style="height: 150px;">22</li>
            <li class="high" style="height: 80px;">7</li>
            <li class="medium" style="height: 50px;">3</li>
            <li class="low" style="height: 90px;">8</li>
            <li class="info" style="height: 40px;">2</li>
        </ul>
    </div>

    We hope you enjoyed our examples and find new uses and variations for
    the concept. Drop us a line if you have any other interesting
    visualizations using XHTML and CSS and we’ll post them here.

  • 相关阅读:
    导出报ora-31634、ora-31664
    A significant part of sql server process memory has been paged out
    解决ora-02429:无法用于删除强制唯一/主键的索引
    更改数据库表中有数据的字段类型NUMERIC(18,2)为NUMERIC(18,6)
    GHOST CLEANUP Process
    oracle查看执行计划explain plan FOR
    ORA-01502: 索引或这类索引的分区处于不可用状态
    mysql 游标循环,嵌套游标循环
    MSSQL FOR XML PATH ('')用法
    Mysql CHARINDEX用法
  • 原文地址:https://www.cnblogs.com/aomi/p/3461209.html
Copyright © 2011-2022 走看看