如何在html中自动生成条形图,纯CSS+HTML制作饼图和条形图

た入场券 2022-10-05 12:53 408阅读 0赞

使用html+css制作的图案或图形化内容响应速度最快，如下贴出我在开发过程中使用CSS+HTML制作的饼图和条形图，有需要的可以拿去。

CSS制作饼图

@keyframes spin\{

to\{transform: rotate(.5turn);\}

@keyframes bg\{

50% \{background: blue;\}

.pie\{

position: relative;

width: 200px;

height: 200px;

border-radius: 50%;

background: red;

background-image:linear-gradient(to right, transparent 50%, blue 0);

.pie>span\{

position: absolute;

line-height: 200px;

width: 100%;

color:\#fff;

text-align: center;

font-size: 25px;

.pie::before\{

position: absolute;

content: '';

display: block;

height: 100%;

width: 50%;

left: 50%;

top: 0;

border-radius: 0 100% 100% 0/50%;

background-color: inherit;

transform-origin: left;

animation: spin .5s linear infinite,bg 1s step-end infinite;

animation-play-state: paused;

animation-delay: inherit;

CSS制作条形图

张三

李四

.barChart\{

position: relative;

width: 80%;

height: 400px;

.barChart>.x\{

bottom: 0;

position: absolute;

width: 100%;

display: flex;

flex-direction: row;

align-items:flex-end;

justify-content: space-around;

.barChart>.x>span\{

transform-origin:left top;

transform: rotate(45deg);

width: 0;

white-space: nowrap;

.barChart>.y\{

position: absolute;

bottom: 30px;

width: 100%;

display: flex;

flex-direction: column-reverse;

align-items: flex-start;

justify-content: flex-start;

.barChart>.y>div\{

border-bottom: 1px solid \#00af16;

width: 100%;

height: 29px;

.barChart>.y>div>span\{

display: inline-block;

transform: translateY(20px);

margin-left: -40px;

width: 30px;

background: white;

text-align: right;

.bars\{

position: absolute;

bottom: 31px;

width: 100%;

display: flex;

flex-direction: row;

align-items: flex-end;

justify-content: space-around;

.bars>.bar\{

width: 5%;

background-image: linear-gradient(to right, \#b8f123 0%, \#b8f123 47%, \#79a602 50%, \#79a602 100%);

display: inline-block;

.bars>.bar>span\{

display: block;

text-align: center;

margin-top: -22px;

如何在html中自动生成条形图,纯CSS+HTML制作饼图和条形图

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 POI Word 图表、柱状图、条形图、折线图、饼图

相关 python如何调用matplotlib生成堆积条形图

相关 Python | 分组条形图

相关 Python：实践绘图——散点图、折线图、条形图、饼图、箱型图

相关 16、17、18_使用gridspec定义多子图,条形图（Bar plots）,分组条形图,堆叠条形图(Stacked bar chart),饼图（Pie plots）,甜甜圈图,嵌套饼图

相关如何在html中自动生成条形图,纯CSS+HTML制作饼图和条形图

相关用Echarts制作动态条形图排行榜

相关 JGCharts插件-饼状图、柱状图、条形图

相关 matplotlib绘制条形图

相关 extjs图表-条形图