统计图表之柱状图

栏目: Html · 发布时间: 5年前

核心属性

list-style-type: none 去除列表元素前面的小黑点

[class^='eje-'] 选择class属性以“eje-”开头的所有元素

border-top: 1px solid #fff 横向坐标轴

content: attr(data-ejeY) 显示HTML标签属性为data-ejeY的值

float: left 使X轴的文字水平排列

:before + background + height 不同高度不同颜色的柱状图

  1. <div class="bar-chart-block block">
  2. <h2 class='titular'>城市统计</h2>
  3. <div class='grafico bar-chart'>
  4. <ul class='eje-y'>
  5. <li data-ejeY='60'></li>
  6. <li data-ejeY='45'></li>
  7. <li data-ejeY='30'></li>
  8. <li data-ejeY='15'></li>
  9. <li data-ejeY='0'></li>
  10. </ul>
  11. <ul class='eje-x'>
  12. <li data-ejeX='37'><i>西安</i></li>
  13. <li data-ejeX='56'><i>北京</i></li>
  14. <li data-ejeX='25'><i>杭州</i></li>
  15. <li data-ejeX='18'><i>海口</i></li>
  16. <li data-ejeX='45'><i>上海</i></li>
  17. <li data-ejeX='50'><i>广州</i></li>
  18. <li data-ejeX='33'><i>成都</i></li>
  19. </ul>
  20. </div>
  21. </div>
  1. * {
  2. box-sizing: border-box;
  3. }
  4. ul {
  5. list-style-type: none;
  6. margin: 0;
  7. padding-left: 0;
  8. }
  9. h2 {
  10. font-size: 17px;
  11. }
  12. h1, h2, p, a, span{
  13. color: #fff;
  14. }
  15. .block {
  16. margin: 25px auto;
  17. background: #394264;
  18. border-radius: 5px;
  19. width: 300px;
  20. height: 400px;
  21. overflow: hidden;
  22. }
  23. .titular {
  24. display: block;
  25. line-height: 60px;
  26. margin: 0;
  27. text-align: center;
  28. }
  29. .grafico.bar-chart {
  30. position: relative;
  31. width: 100%;
  32. height: 60%;
  33. background: #3468AF;
  34. padding: 0 1rem 2rem 1rem;
  35. color: #fff;
  36. font-size: 80%;
  37. }
  38. [class^='eje-'] {
  39. position: absolute;
  40. left: 0;
  41. bottom: 0rem;
  42. width: 100%;
  43. height: 80%;
  44. padding: 1rem 1rem 0 2rem;
  45. }
  46. .eje-x {
  47. height: 2.5rem;
  48. border: 1px solid blue;
  49. }
  50. .bar-chart [class^='eje-'] {
  51. padding: 0 1rem 0 2rem;
  52. bottom: 1rem;
  53. }
  54. .bar-chart .eje-y li {
  55. height: 20%;
  56. border-top: 1px solid #fff;
  57. }
  58. [data-ejeY]:before {
  59. content: attr(data-ejeY);
  60. display: inline-block;
  61. position: relative;
  62. left: -2.5rem;
  63. top: -.5rem;
  64. width: 2rem;
  65. line-height: 0;
  66. text-align: right;
  67. }
  68. .bar-chart .eje-x {
  69. bottom: 0;
  70. }
  71. .bar-chart .eje-x li {
  72. width: 14%;
  73. position: relative;
  74. float: left;
  75. text-align: left;
  76. }
  77. .bar-chart .eje-x li i {
  78. display: block;
  79. transform: rotatez(-45deg) translatex(-1rem);
  80. transform-origin: 30% 60%;
  81. }
  82. .bar-chart .eje-x li:before {
  83. content: '';
  84. position: absolute;
  85. bottom: 1.9rem;
  86. width: 70%;
  87. right: 5%;
  88. box-shadow: 3px 0 rgba(0,0,0,.1), 3px -3px rgba(0,0,0,.1);
  89. }
  90. .bar-chart .eje-x li:nth-child(1):before {
  91. background: #E64C65;
  92. height: 570%;
  93. }
  94. .bar-chart .eje-x li:nth-child(2):before {
  95. background: #11A8AB;
  96. height: 900%;
  97. }
  98. .bar-chart .eje-x li:nth-child(3):before {
  99. background: #FCB150;
  100. height: 400%;
  101. }
  102. .bar-chart .eje-x li:nth-child(4):before {
  103. background: #4FC4F6;
  104. height: 290%;
  105. }
  106. .bar-chart .eje-x li:nth-child(5):before {
  107. background: #FFED0D;
  108. height: 720%;
  109. }
  110. .bar-chart .eje-x li:nth-child(6):before {
  111. background: #F46FDA;
  112. height: 820%;
  113. }
  114. .bar-chart .eje-x li:nth-child(7):before {
  115. background: #15BFCC;
  116. height: 520%;
  117. }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

P2P网贷投资手册

P2P网贷投资手册

徐红伟 / 同济大学出版社 / 2015-4 / CNY 28.00

《P2P网贷投资手册》由“P2P网络借贷知多少”、“新手如何开始P2P网贷投资”和“如何确定适合自己的网贷投资策略”三部分组成。将网贷之家平台上众多投资人和从业者的智慧集结成册,分享给网贷投资上的同路人。一起来看看 《P2P网贷投资手册》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试