html js 扇形统计图_CSS3/JS 显示百分比的饼图

最新推荐文章于 2024-03-05 14:41:29 发布
最新推荐文章于 2024-03-05 14:41:29 发布
阅读量452 收藏
点赞数
文章标签： html js 扇形统计图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39897758/article/details/111820321
版权
这篇博客介绍了如何使用CSS3和JavaScript来创建一个交互式的扇形统计图，该图可以显示百分比。通过定义不同角度的旋转变换，实现了从0到360度的扇形划分，并通过动画效果增强了视觉体验。
摘要由CSDN通过智能技术生成

CSS

语言：

CSSSCSS

确定

.circle-chart {

cursor: pointer;

float: left;

margin: 10px;

height: 400px;

position: relative;

width: 400px;

}

.circle-chart.small {

height: 200px;

width: 200px;

}

.circle-chart p {

color: #da1d52;

font-family: sans-serif;

font-size: 6em;

font-weight: 600;

line-height: 1em;

margin-top: -0.5em;

position: absolute;

top: 50%;

left: 0;

text-align: center;

width: 100%;

/* Safari, Chrome and Opera > 12.1 */

-webkit-animation: fadein 1.5s;

/* Firefox < 16 */

-moz-animation: fadein 1.5s;

/* Internet Explorer */

-ms-animation: fadein 1.5s;

/* Opera < 12.1 */

-o-animation: fadein 1.5s;

animation: fadein 1.5s;

}

.circle-chart.small p {

font-size: 3.3em;

}

.circle-chart .bar {

height: 80%;

margin: -40% 0 0 -5px;

position: absolute;

left: 50%;

top: 50%;

width: 3%;

}

.circle-chart .bar:after {

background: #da1d52;

border-radius: 10px;

content: "";

height: 15%;

position: absolute;

top: -10%;

left: 0;

width: 100%;

}

.circle-chart.green p {

color: #8cc63f;

}

.circle-chart.green .bar:after {

background: #8cc63f;

}

.circle-chart .bar:nth-child(2) {

-ms-transform: rotate(10deg);

-webkit-transform: rotate(10deg);

transform: rotate(10deg);

}

.circle-chart .bar:nth-child(3) {

-ms-transform: rotate(20deg);

-webkit-transform: rotate(20deg);

transform: rotate(20deg);

}

.circle-chart .bar:nth-child(4) {

-ms-transform: rotate(30deg);

-webkit-transform: rotate(30deg);

transform: rotate(30deg);

}

.circle-chart .bar:nth-child(5) {

-ms-transform: rotate(40deg);

-webkit-transform: rotate(40deg);

transform: rotate(40deg);

}

.circle-chart .bar:nth-child(6) {

-ms-transform: rotate(50deg);

-webkit-transform: rotate(50deg);

transform: rotate(50deg);

}

.circle-chart .bar:nth-child(7) {

-ms-transform: rotate(60deg);

-webkit-transform: rotate(60deg);

transform: rotate(60deg);

}

.circle-chart .bar:nth-child(8) {

-ms-transform: rotate(70deg);

-webkit-transform: rotate(70deg);

transform: rotate(70deg);

}

.circle-chart .bar:nth-child(9) {

-ms-transform: rotate(80deg);

-webkit-transform: rotate(80deg);

transform: rotate(80deg);

}

.circle-chart .bar:nth-child(10) {

-ms-transform: rotate(90deg);

-webkit-transform: rotate(90deg);

transform: rotate(90deg);

}

.circle-chart .bar:nth-child(11) {

-ms-transform: rotate(100deg);

-webkit-transform: rotate(100deg);

transform: rotate(100deg);

}

.circle-chart .bar:nth-child(12) {

-ms-transform: rotate(110deg);

-webkit-transform: rotate(110deg);

transform: rotate(110deg);

}

.circle-chart .bar:nth-child(13) {

-ms-transform: rotate(120deg);

-webkit-transform: rotate(120deg);

transform: rotate(120deg);

}

.circle-chart .bar:nth-child(14) {

-ms-transform: rotate(130deg);

-webkit-transform: rotate(130deg);

transform: rotate(130deg);

}

.circle-chart .bar:nth-child(15) {

-ms-transform: rotate(140deg);

-webkit-transform: rotate(140deg);

transform: rotate(140deg);

}

.circle-chart .bar:nth-child(16) {

-ms-transform: rotate(150deg);

-webkit-transform: rotate(150deg);

transform: rotate(150deg);

}

.circle-chart .bar:nth-child(17) {

-ms-transform: rotate(160deg);

-webkit-transform: rotate(160deg);

transform: rotate(160deg);

}

.circle-chart .bar:nth-child(18) {

-ms-transform: rotate(170deg);

-webkit-transform: rotate(170deg);

transform: rotate(170deg);

}

.circle-chart .bar:nth-child(19) {

-ms-transform: rotate(180deg);

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

.circle-chart .bar:nth-child(20) {

-ms-transform: rotate(190deg);

-webkit-transform: rotate(190deg);

transform: rotate(190deg);

}

.circle-chart .bar:nth-child(21) {

-ms-transform: rotate(200deg);

-webkit-transform: rotate(200deg);

transform: rotate(200deg);

}

.circle-chart .bar:nth-child(22) {

-ms-transform: rotate(210deg);

-webkit-transform: rotate(210deg);

transform: rotate(210deg);

}

.circle-chart .bar:nth-child(23) {

-ms-transform: rotate(220deg);

-webkit-transform: rotate(220deg);

transform: rotate(220deg);

}

.circle-chart .bar:nth-child(24) {

-ms-transform: rotate(230deg);

-webkit-transform: rotate(230deg);

transform: rotate(230deg);

}

.circle-chart .bar:nth-child(25) {

-ms-transform: rotate(240deg);

-webkit-transform: rotate(240deg);

transform: rotate(240deg);

}

.circle-chart .bar:nth-child(26) {

-ms-transform: rotate(250deg);

-webkit-transform: rotate(250deg);

transform: rotate(250deg);

}

.circle-chart .bar:nth-child(27) {

-ms-transform: rotate(260deg);

-webkit-transform: rotate(260deg);

transform: rotate(260deg);

}

.circle-chart .bar:nth-child(28) {

-ms-transform: rotate(270deg);

-webkit-transform: rotate(270deg);

transform: rotate(270deg);

}

.circle-chart .bar:nth-child(29) {

-ms-transform: rotate(280deg);

-webkit-transform: rotate(280deg);

transform: rotate(280deg);

}

.circle-chart .bar:nth-child(30) {

-ms-transform: rotate(290deg);

-webkit-transform: rotate(290deg);

transform: rotate(290deg);

}

.circle-chart .bar:nth-child(31) {

-ms-transform: rotate(300deg);

-webkit-transform: rotate(300deg);

transform: rotate(300deg);

}

.circle-chart .bar:nth-child(32) {

-ms-transform: rotate(310deg);

-webkit-transform: rotate(310deg);

transform: rotate(310deg);

}

.circle-chart .bar:nth-child(33) {

-ms-transform: rotate(320deg);

-webkit-transform: rotate(320deg);

transform: rotate(320deg);

}

.circle-chart .bar:nth-child(34) {

-ms-transform: rotate(330deg);

-webkit-transform: rotate(330deg);

transform: rotate(330deg);

}

.circle-chart .bar:nth-child(35) {

-ms-transform: rotate(340deg);

-webkit-transform: rotate(340deg);

transform: rotate(340deg);

}

.circle-chart .bar:nth-child(36) {

-ms-transform: rotate(350deg);

-webkit-transform: rotate(350deg);

transform: rotate(350deg);

}

@keyframes fadein {

/* Firefox < 16 */

from {

opacity: 0;

}

to {

opacity: 1;

}

}

@-moz-keyframes fadein {

/* Safari, Chrome and Opera > 12.1 */

from {

opacity: 0;

}

to {

opacity: 1;

}

}

@-webkit-keyframes fadein {

/* Internet Explorer */

from {

opacity: 0;

}

to {

opacity: 1;

}

}

@-ms-keyframes fadein {

/* Opera < 12.1 */

from {

opacity: 0;

}

to {

opacity: 1;

}

}

@-o-keyframes fadein {

from {

opacity: 0;

}

to {

opacity: 1;

}

}

weixin_39897758
关注
html js 扇形统计图_Html5饼图绘制实现统计图的方法
weixin_28978471的博客
12-31 880
这篇文章我们来讲一下在网站建设中，Html5饼图绘制实现统计图的方法。本文对大家进行网站开发设计工作或者学习都有一定帮助，下面让我们进入正文。Html5提供了强大的绘图API，让我们能够使用javascript轻松绘制各种图形。本文将主要讲解使用HTML5绘制饼图(统计图)的方法。先看一下饼图效果：这个图是动态生成的，根据传入的比例参数(数组)，来动态绘制饼图。饼图的大小也是根据高度来动态调整的。...
html js 扇形统计图_纯HTML5 Canvas实现的饼图
weixin_33724434的博客
02-15 346
纯HTML5 Canvas实现的饼图发布时间：2020-06-25 09:23:44来源：51CTO阅读：414作者：gloomyfish基本思路：主要是利用HTML5 Canvas实现饼图绘制，绘制弧度的API主要是使用context.arc与lineto两个API。实现的功能有：1. 支持标签Legend显示或者隐藏2. 首次载入动画效果3. 鼠标tooltip效果4. 自定义饼图大小与是否添...
动态生成扇形统计图
07-19
可通过手动输入数据动态生成扇形统计图.html+css+js+jquery实现.可完成数据的手动添加和删除.单独的扇形可以单击溢出.
html js 扇形统计图_html5制作饼图
weixin_33049919的博客
02-01 440
function drawCircle(canvasId, data_arr, color_arr, text_arr) {var c = document.getElementById(canvasId);var ctx = c.getContext("2d");var radius = c.height / 2 - 20; //半径var ox = radius + 20,oy = radiu...
【css】实现饼图
richest_qi的博客
09-12 1794
<body> <div class="box"></div> <div class="box2"></div> <div class="box3"></div> </body> div{ margin: 5px; } .box{ width: 100px; height: 100px; background-color: lightgolde
CSS实现饼图效果
08-09
使用纯CSS实现的饼状图，可按照自己的需求进行修改，代码较简单
使用CSS制作动态的环形图/饼图
最新发布
Moon Star
03-05 1536
使用纯 css 实现一个环形图。
用CSS和SVG制作饼图
starsliu
08-12 2081
原文出处： lulux的博客   欢迎分享原创到伯乐头条 在涉及到CSS技术时，没有人会比Lea Verou更执着、但是又足够聪明，努力去找寻问题的各种解决方案。最近，Lea自己撰写、设计和出版了一本书——CSS Secrets，这本书非常有趣，包括一些CSS小技巧以及解决常见问题的技术。如果你觉得自己的CSS技术还不错，看看这本书，你会吃惊的。在这篇文章中，我们发布了书里的一些片段
纯css画饼状图
weixin_45264424的博客
08-02 2181
一、饼图 <div class="pie"></div> .pie { width:100px; height:100px; border-radius:50%; background: yellowgreen; background-image: linear-gradient(toright,transparent 50%,#655 0); } .pie::before { content:''; display:b
css3实现360°扇形/饼图-简单易用
weixin_33686714的博客
07-03 776
为什么80%的码农都做不了架构师？>>> ...
jquery扇形统计图下载即可用
06-27
这是一款非常好用的jquery统计图，可以支持二次开发
jquery显示扇形插件
11-24
显示扇形的jquery插件，详细信息：http://blog.csdn.net/wuyt2008/article/details/53302880#t1
扇形百分比控件
doctorzhong的博客
11-07 760
根据自己需求可以在添加一些属性方法，供外界调用。比如环的颜色，字体的大小。 public class fanImageView extends View { int centerX, centerY; Paint mPaint; int radius; int gap; int sweepAngle
纯css3实现饼状图-------Day21
热门推荐
麦田里
05-30 1万+
现代网站在商务应用中比较广泛
纯css饼图,使用css3画饼图
weixin_29008691的博客
08-04 1191
CSS3 Gradient介绍参考地址：效果图：html:css:.colorWheel {position: relative;width: 16em;height: 16em;background: linear-gradient(36deg, #7c1 42%, transparent 42%),linear-gradient(72deg, #999 75.48%, transparent ...
css画扇形
前端阿玉博客
02-10 533
/*方式1*/ .sector { height: 0; width: 0; border-top: 50px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; border-radius: 50%; } /*方式2*/ .sector { height: 0; width: 0; border: 50px sol.
html 扇形360 c,css3实现360°扇形/饼图-简单易用
weixin_29865939的博客
07-01 185
引入pie-shape.js (function(global, undefined){var PieShape = function(options){varo = options || {},wrap = document.createElement("div"),half1 = document.createElement("div"),half2 ...
实现环形和扇形百分比
weixin_30387423的博客
05-31 301
最近研究了下canvas环形百分图，先说明一下基础知识： 绘制圆环： var canvas=document.getElementById("canvas"); var cxt = canvas.getContext("2d"); // 绘制底层圈 cxt.beginPath(); cxt.arc(30,30,20,0,Math.PI*2,false); cxt.lineWid...
html css百分比效果,利用JavaScript与CSS制作百分比进度条效果的简单实例
weixin_30036893的博客
06-03 1022
百分比进度条效果是比较常用的特效之一，它能让人们在等待的时间内不那么无聊，能够提供给人们信息，阿萌此次来介绍一种利用javascript+CSS实现简单的思路。进度条的实现方法很多，此次介绍的思路是：准备两个容器，背景颜色各不相同，利用绝对定位或者相对定位等方法层叠在一起，先设置顶部容器宽度为0，然后随着进度的百分比参数改变顶部容器的宽度比例，从而制作出类似于灌水一样的进度条效果。下面放代码，大家...
java excel 饼图_Java 在 Excel 中创建饼图/环形图
05-18
Java 可以使用 Apache POI 库来操作 Excel 文件，其中也包括创建饼图和环形图。 以下是一个简单的示例代码，可以创建一个包含饼图的 Excel 文件： ``` import java.io.FileOutputStream; import org.apache.poi.ss...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值