js 象形图比例计算占比计算人数百分比

忘是亡心i 2023-10-01 15:39 36阅读 0赞

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAcXFfNDE5NTQ1ODU_size_19_color_FFFFFF_t_70_g_se_x_16][]

<div class="portrait-box">
    				<div class="left">
    					<div class="box-chart">
    						<div>
    							<div class="r-people-img">
    								<div class="nv-people"> 
    									<div class="people-img-find"></div>
    									<div class="people-img-find"></div>
    									<div class="people-img-find"></div>
    									<div class="people-img-find"></div>
    									<div class="people-img-find"></div>
    									<div class="people-img-find"></div>
    									<div class="people-img-find"></div>
    									<div class="people-img-find"></div>
    									<div class="people-img-find"></div>
    									<div class="people-img-find"></div>
    									<div class="people-txt right people-num">
    										<div class="people-b"><i></i>%</div>
    										<div class="people-number">女: <span class="nan-txt"></span>人</div>
    									</div>
    								</div>
    								<div class="nan-people"> 
    									<div class="people-img-find"></div>
    									<div class="people-img-find"></div>
    									<div class="people-img-find"></div>
    									<div class="people-img-find"></div>
    									<div class="people-img-find"></div>
    									<div class="people-img-find"></div>
    									<div class="people-img-find"></div>
    									<div class="people-img-find"></div>
    									<div class="people-img-find"></div>
    									<div class="people-img-find"></div>
    									<div class="people-txt right people-num">
    										<div class="people-b"><i></i>%</div>
    										<div class="people-number">男: <span class="nan-txt"></span>人</div>
    									</div>
    								</div>
    								<div class="unk-people"> 
    									<div class="people-img-find"></div>
    									<div class="people-img-find"></div>
    									<div class="people-img-find"></div>
    									<div class="people-img-find"></div>
    									<div class="people-img-find"></div>
    									<div class="people-img-find"></div>
    									<div class="people-img-find"></div>
    									<div class="people-img-find"></div>
    									<div class="people-img-find"></div>
    									<div class="people-img-find"></div>
    									<div class="people-txt right people-num">
    										<div class="people-b"><i></i>%</div>
    										<div class="people-number">未知: <span class="nan-txt"></span>人</div>
    									</div>
    								</div>
    							</div>
    							
    						</div>
    					</div>
    				</div>
    				<div class="right"></div>
    			</div>

<script>
    				//性别分布
    				var sexNv,sexNan,sexUnk;
    				var arr = [ //num 比例  people 人数
    					{num:39.24,people:2350}, //女
    					{num:52.08,people:3527}, //男
    					{num:8.68,people:356}, //未知
    				]
    				
    				$.each(arr, function (key, value) {
    					if (key == 0) { //女
    						sexNv = Math.round(10 * value.num / 100); //计算显示人个数
    						$('.people-txt').eq(0).find('i').text(value.num); //比例%值
    						$('.people-txt').eq(0).find('.nan-txt').text(value.people); //人数
    					} else if(key == 1){ //男
    						sexNan = Math.round(10 * value.num / 100);  //计算显示人个数
    						$('.people-txt').eq(1).find('i').text(value.num); //比例%值
    						$('.people-txt').eq(1).find('.nan-txt').text(value.people); //人数
    					}else { //未知
    						sexUnk = Math.round(10 * value.num / 100);  //计算显示人个数
    						$('.people-txt').eq(2).find('i').text(value.num); //比例%值
    						$('.people-txt').eq(2).find('.nan-txt').text(value.people); //人数
    					}
    				});
    				
    				for (var i = 0; i < sexNv; i++) { //女  显示人个数
    					$('.portrait-box .r-people-img > div').eq(0).children().eq(i).addClass('active');
    				}
    				for (var i = 0; i < sexNan; i++) { //男 显示人个数
    					$('.portrait-box .r-people-img > div').eq(1).children().eq(i).addClass('active');
    				}
    				for (var i = 0; i < sexUnk; i++) { //未知 显示人个数
    					$('.portrait-box .r-people-img > div').eq(2).children().eq(i).addClass('active');
    				}
    				
    				
    			</script>

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAcXFfNDE5NTQ1ODU_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/7466b9bad3f44474900ad2197b5c16b9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAcXFfNDE5NTQ1ODU=,size_19,color_FFFFFF,t_70,g_se,x_16

发表评论取消回复

表情：

评论列表（有 0 条评论，36人围观）

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

相关阅读

相关 js计算百分比相加

JavaScript 可以使用以下方法来计算百分比相加: function addPercentages(a, b) { let result = a +

矫情吗；*/ 2024年03月26日 08:13/ 0 赞/ 97 阅读

相关 java中计算百分比

java中计算百分比用到了NumberFormat类与DecimalFormat类，直接上代码：用到了NumberFormat类与DecimalFormat

柔光的暖阳◎/ 2023年10月05日 22:34/ 0 赞/ 95 阅读

相关 js 象形图比例计算占比计算人数百分比

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAcXFfNDE5NTQ1ODU_size_19_color_FFF

忘是亡心i/ 2023年10月01日 15:39/ 0 赞/ 37 阅读

相关 java计算百分比方法

我的方法可能有漏洞，可能不是最佳方法。后续待完善 package com.example.demo.test; import java.text.D

落日映苍穹つ/ 2023年07月01日 08:52/ 0 赞/ 55 阅读

相关 js基于当前值计算百分比

GetPercent(total, num) { // total总数基数(相当于100%) // num当前数值 num = pars

「爱情、让人受尽委屈。」/ 2022年10月15日 12:58/ 0 赞/ 242 阅读

相关 MySql计算百分比

根据相应条件抽出相应count数（myCount）抽出总count数(totalCount) 计算百分比：myCount / totalCount \ 100 四舍五入

青旅半醒/ 2022年10月10日 11:28/ 0 赞/ 243 阅读

相关计算百分比工具类

一代码 public static String percentageConversion(long divisor, long dividend) {

谁借莪１个温暖的怀抱￠/ 2022年10月10日 11:26/ 0 赞/ 231 阅读

相关计算百分比

private static String getRate(int success,int count)\{ String rate="0.00%"

梦里梦外;/ 2022年08月27日 12:00/ 0 赞/ 291 阅读

相关 MySql计算百分比

计算百分比 -------------------- @top 代表分子， @bot 代表分母 set @top = 1; set @bot = 3

一时失言乱红尘/ 2022年05月24日 03:49/ 0 赞/ 309 阅读

相关【Excel】Excel如何快速计算出每项所占百分比

Excel中想要知道个各部分所占的百分比，不需要每个数据单独去算，下面的方法可以下拉复制公式，进行批量快速地计算百分比。 1. 求出B列到总和 ![在这里插入图

骑猪看日落/ 2021年09月24日 20:18/ 0 赞/ 583 阅读