Blog

简单的图表效果css同样可以实现

通常生成图表可能会用到以下几种方法: 1. PHP扩展 (JpGraph、ChartDirector) 2. JavaScript (Flot、 Flotr、Emprise JavaScript Charts 、PlotKit) 3. Flash (Open Flash Chart 、AmCharts、PHP/SWF Charts 、FusionCharts) 4. 其他 (Visifire、JFreeChart) 其实简单的图表效果css同样可以实现: CSS: <style type="text/css" media="screen"> *{ margin: 0; padding: 0; list-style-type: none;} body { font-family: Helvetica, Arial, sans-serif; color: #333; } a { color: #000; text-decoration: none; font-weight: bold; } a:hover { color: #333; } h2, h3, h4 { clear: both; margin: 0 0 0.6em 0;} h3 { color: #666; } .section { float: left; clear: left; padding: 1em 2em;} .timeline { font-size: 0.75em; height: 10em; width: 53em;} .timeline li { position: relative; float: left; width: 1.5em; margin: 0 0.1em; height: 8em;} .timeline li span { cursor:pointer;} .timeline li a { display: block; height: 100%;} .timeline li .label { display: block; position: absolute; bottom: -2em; left: 0; background: #fff; width: 100%; height: 2em; line-height: 2em; text-align: center;} .timeline li a .count { display: block; position: absolute; bottom: 0; left: 0; height: 0; width: 100%; background: #999999; text-indent: -9999px; overflow: hidden;} .timeline li:hover { background: #EFEFEF;} .timeline li a:hover .count { background: #FF0000;} </style> HTML: <div> <h2>CSS月度统计柱状图表</h2> <ul> <li> <a href=""> <span>1</span> <span style="height: 20%">(40)</span> </a> </li> <li> <a href=""> <span>2</span> <span style="height: 50%">(100)</span> </a> </li> <li> <a href=""> <span>3</span> <span style="height: 75%">(150)</span> </a> </li> <li> <a href=""> <span>4</span> <span style="height: 20%">(40)</span> </a> </li> <li> <a href=""> <span>5</span> <span style="height: 50%">(100)</span> </a> </li> <li> <a href=""> <span>6</span> <span style="height: 20%">(40)</span> </a> </li> <li> <a href=""> <span>7</span> <span style="height: 20%">(40)</span> </a> </li> <li> <a href=""> <span>8</span> <span style="height: 50%">(100)</span> </a> </li> <li> <a href=""> <span>9</span> <span style="height: 75%">(150)</span> </a> </li> <li> <a href=""> <span>10</span> <span style="height: 20%">(40)</span> </a> </li> <li> <a href=""> <span>11</span> <span style="height: 50%">(100)</span> </a> </li> <li> <a href=""> <span>12</span> <span style="height: 20%">(40)</span> </a> </li> <li> <a href=""> <span>13</span> <span style="height: 75%">(100)</span> </a> </li> <li> <a href=""> <span>14</span> <span style="height: 50%">(100)</span> </a> </li> <li> <a href=""> <span>15</span> <span style="height: 100%">(150)</span> </a> </li> <li> <a href=""> <span>16</span> <span style="height: 20%">(40)</span> </a> </li> <li> <a href=""> <span>17</span> <span style="height: 50%">(100)</span> </a> </li> <li> <a href=""> <span>18</span> <span style="height: 75%">(150)</span> </a> </li> <li> <a href=""> <span>19</span> <span style="height: 100%">(40)</span> </a> </li> <li> <a href=""> <span>20</span> <span style="height: 50%">(100)</span> </a> </li> <li> <a href=""> <span>21</span> <span style="height: 100%">(150)</span> </a> </li> <li> <a href=""> <span>22</span> <span style="height: 20%">(40)</span> </a> </li> <li> <a href=""> <span>23</span> <span style="height: 50%">(100)</span> </a> </li> <li> <a href=""> <span>24</span> <span style="height: 75%">(150)</span> </a> </li> <li> <a href=""> <span>25</span> <span style="height: 75%">(150)</span> </a> </li> <li> <a href=""> <span>26</span> <span style="height: 20%">(40)</span> </a> </li> <li> <a href=""> <span>27</span> <span style="height: 50%">(100)</span> </a> </li> <li> <a href=""> <span>28</span> <span style="height: 75%">(150)</span> </a> </li> <li> <a href=""> <span>29</span> <span style="height: 20%">(40)</span> </a> </li> <li> <a href=""> <span>30</span> <span style="height: 50%">(100)</span> </a> </li> <li> <a href=""> <span>31</span> <span style="height: 75%">(150)</span> </a> </li> </ul> </div>

Over 95% of our clients recommend our language services to others


Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.
TOP