统计图表之线状图

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

核心属性

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

left: 100%; bottom: 0 使每一条线段紧接着前一条线段显示

width + transform: rotate( ) 设置线段的长度的角度

content: '+' attr(data-valor) '%' 显示HTML标签属性为data-valor的值

  1. <div class="line-chart-block block">
  2. <div class="line-chart">
  3. <div class='grafico'>
  4. <ul class='eje-y'>
  5. <li data-ejeY='30'></li>
  6. <li data-ejeY='20'></li>
  7. <li data-ejeY='10'></li>
  8. <li data-ejeY='0'></li>
  9. </ul>
  10. <ul class='eje-x'>
  11. <li>四月</li>
  12. <li>五月</li>
  13. <li>六月</li>
  14. </ul>
  15. <span data-valor='25'>
  16. <span data-valor='8'>
  17. <span data-valor='13'>
  18. <span data-valor='5'>
  19. <span data-valor='23'>
  20. <span data-valor='12'>
  21. <span data-valor='15'></span>
  22. </span>
  23. </span>
  24. </span>
  25. </span>
  26. </span>
  27. </span>
  28. </div>
  29. </div>
  30. <ul class="time-lenght horizontal-list">
  31. <li><a class="time-lenght-btn" href="#14">周线</a></li>
  32. <li><a class="time-lenght-btn" href="#15">月线</a></li>
  33. <li><a class="time-lenght-btn" href="#16">年线</a></li>
  34. </ul>
  35. <ul class="month-data clear">
  36. <li>
  37. <p>四月<span class="scnd-font-color"> 2019</span></p>
  38. <p><span class="entypo-plus increment"> </span>21<sup>%</sup></p>
  39. </li>
  40. <li>
  41. <p>五月<span class="scnd-font-color"> 2019</span></p>
  42. <p><span class="entypo-plus increment"> </span>48<sup>%</sup></p>
  43. </li>
  44. <li>
  45. <p>六月<span class="scnd-font-color"> 2019</span></p>
  46. <p><span class="entypo-plus increment"> </span>35<sup>%</sup></p>
  47. </li>
  48. </ul>
  49. </div>
  1. * {
  2. box-sizing: border-box;
  3. }
  4. a {
  5. text-decoration: none;
  6. font-size: 15px;
  7. }
  8. h1, h2, p, a, span{
  9. color: #fff;
  10. }
  11. .scnd-font-color {
  12. color: #9099b7;
  13. }
  14. .block {
  15. width: 300px;
  16. margin: 25px auto;
  17. background: #394264;
  18. border-radius: 5px;
  19. overflow: hidden;
  20. }
  21. ul {
  22. list-style-type: none;
  23. margin: 0;
  24. padding-left: 0;
  25. }
  26. .line-chart {
  27. height: 200px;
  28. background: #11a8ab;
  29. }
  30. .horizontal-list {
  31. margin: 0;
  32. padding: 0;
  33. list-style-type: none;
  34. }
  35. .horizontal-list li {
  36. float: left;
  37. }
  38. .time-lenght {
  39. padding-top: 22px;
  40. padding-left: 38px;
  41. overflow: hidden;
  42. }
  43. .time-lenght-btn {
  44. display: block;
  45. width: 70px;
  46. line-height: 32px;
  47. margin-right: 5px;
  48. background: #50597b;
  49. border-radius: 5px;
  50. font-size: 14px;
  51. text-align: center;
  52. transition: background .3s;
  53. }
  54. .time-lenght-btn:hover {
  55. text-decoration: none;
  56. background: #e64c65;
  57. }
  58. .grafico {
  59. position: relative;
  60. width: 100%;
  61. height: 100%;
  62. padding: 2rem 1rem 1rem;
  63. color: #fff;
  64. font-size: 80%;
  65. }
  66. .grafico span {
  67. display: block;
  68. position: absolute;
  69. bottom: 3rem;
  70. left: 2rem;
  71. height: 0;
  72. border-top: 2px solid;
  73. transform-origin: left center;
  74. }
  75. .grafico span > span {
  76. left: 100%; bottom: 0;
  77. }
  78. [data-valor='25'] {width: 75px; transform: rotate(-45deg);}
  79. [data-valor='8'] {width: 24px; transform: rotate(65deg);}
  80. [data-valor='13'] {width: 39px; transform: rotate(-45deg);}
  81. [data-valor='5'] {width: 15px; transform: rotate(50deg);}
  82. [data-valor='23'] {width: 69px; transform: rotate(-70deg);}
  83. [data-valor='12'] {width: 36px; transform: rotate(75deg);}
  84. [data-valor='15'] {width: 45px; transform: rotate(-45deg);}
  85. [data-valor]:before {
  86. content: '';
  87. position: absolute;
  88. right: -4px;
  89. bottom: -3px;
  90. padding: 4px;
  91. background: #fff;
  92. border-radius: 50%;
  93. }
  94. [data-valor='23']:after {
  95. content: '+' attr(data-valor) '%';
  96. position: absolute;
  97. right: -2.7rem;
  98. top: -1.7rem;
  99. padding: .3rem .5rem;
  100. background: #50597B;
  101. border-radius: .5rem;
  102. transform: rotate(45deg);
  103. }
  104. [class^='eje-'] {
  105. position: absolute;
  106. left: 0;
  107. bottom: 0rem;
  108. width: 100%;
  109. padding: 1rem 1rem 0 2rem;
  110. height: 80%;
  111. }
  112. .eje-x {
  113. height: 2.5rem;
  114. }
  115. .eje-y li {
  116. height: 25%;
  117. border-top: 1px solid #777;
  118. }
  119. [data-ejeY]:before {
  120. content: attr(data-ejeY);
  121. position: relative;
  122. display: inline-block;
  123. left: -2.5rem;
  124. top: -.5rem;
  125. width: 2rem;
  126. text-align: right;
  127. line-height: 0;
  128. }
  129. .eje-x li {
  130. width: 33%;
  131. float: left;
  132. text-align: center;
  133. }
  134. .month-data {
  135. padding-top: 28px;
  136. }
  137. .month-data p {
  138. display: inline-block;
  139. margin: 0;
  140. padding: 0 25px 15px;
  141. font-size: 16px;
  142. }
  143. .month-data p:last-child {
  144. padding: 0 25px;
  145. float: right;
  146. font-size: 15px;
  147. }
  148. .increment {
  149. color: #e64c65;
  150. }

以上所述就是小编给大家介绍的《统计图表之线状图》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

用户故事地图

用户故事地图

Jeff Patton / 李涛、向振东 / 清华大学出版社 / 2016-4-1 / 59.00元

用户故事地图作为一种有效的需求工具,越来越广泛地应用于开发实践中。本书以用户故事地图为主题,强调以合作沟通的方式来全面理解用户需求,涉及的主题包括怎么以故事地图的方式来讲用户需求,如何分解和优化需求,如果通过团队协同工作的方式来积极吸取经验教训,从中洞察用户的需求,开发真正有价值的、小而美的产品和服务。本书适合产品经理、用户体验设计师、产品负责人、业务分析师、IT项目经理、敏捷教练和精益教练阅读和......一起来看看 《用户故事地图》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

SHA 加密
SHA 加密

SHA 加密工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具