【HTML】简单实用:CSS+DIV绘制常见图表
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
1 css+html绘制柱形图<div class="bargraph"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="bargraph"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> .bargraph { display: flex; justify-content:space-around } .bargraph div { background-color: bisque; } .bargraph div { width: 30px; height: 100%; } .bargraph div:nth-child(1) { background: linear-gradient(to bottom, transparent 30%, #62a8fb 30%, #62a8fb 60%, #5778d9 60%); } .bargraph div:nth-child(2) { background: linear-gradient(to bottom, transparent 74%, #62a8fb 74%, #62a8fb 89%, #5778d9 89%); } .bargraph div:nth-child(3) { background: linear-gradient(to bottom, transparent 55%, #62a8fb 55%, #62a8fb 83%, #5778d9 83%); } .bargraph div:nth-child(4) { background: linear-gradient(to bottom, transparent 65%, #62a8fb 65%, #62a8fb 83%, #5778d9 83%); } .bargraph div:nth-child(5) { background: linear-gradient(to bottom, transparent 45%, #62a8fb 45%, #62a8fb 73%, #5778d9 73%); } 2 css+html绘制饼图<div class="piegraph"></div> body{ background-color: #0f117c; } .piegraph { width: 250px; height: 250px; border-radius: 50%; background-color: antiquewhite; } .piegraph { ... background: conic-gradient(#668fd5 30deg, #2dc2dc 30deg, #2dc2dc 65deg, #d4ec59 65deg, #d4ec59 110deg, #fcb74d 110deg, #fcb74d 200deg, #fde78d 200deg); } 3 css+html绘制折现图<div class="bar"> <div class="piegraph"></div> </div> body{ background-color: #0f117c; } .piegraph { width: 60px; height: 3px; background-color: #fcb74d; } <div class="bar"> <div class="piegraph"></div> <div class="piegraph"></div> <div class="piegraph"></div> <div class="piegraph"></div> <div class="piegraph"></div> </div> .piegraph:nth-child(1) { transform: rotate(-60deg); } .piegraph:nth-child(2){ transform: rotate(2deg); position: relative; top: -23px; left: -17px; width: 60px; } .piegraph:nth-child(3){ transform: rotate(-60deg); position: relative; top: -46px; left: -34px; } .piegraph:nth-child(4){ transform: rotate(39deg); position: relative; top: -42px; left: -59px; width: 100px; } .piegraph:nth-child(5){ transform: rotate(2deg); position: relative; top: -10px; left: -71px; width: 80px; } .bar { display: flex; margin: 200px; } </style> 该文章在 2023/7/26 11:25:31 编辑过 |
关键字查询
相关文章
正在查询... |