计算进度圈中的百分比 [英] calculate percentage in progress circle
问题描述
我想在不点击渲染按钮的情况下动态(实时)生成进度圈
示例:
在成分 1 的输入中添加 10，在成分 2 的输入中添加 10，在成分 3 的输入中添加 10.总共是 30 个圆应该在不单击渲染按钮的情况下进行渲染
取消选中任何成分复选框总计计算所有输入值.总圆应该在不点击渲染按钮的情况下渲染
演示:https://jsfiddle.net/worldwildweb/mcjs9275/
jQuery(function($) {$(函数(){$(".tags").on('input', function() {varcalculated_total_sum = $(this).find(".ingredient").map(function() {const chck = $(this).is(":checked")const val = $(this).closest("div").find(".txtCal").val()返回检查?+val : 0;}).get().reduce((a, b) => a + b)$("#percent").val(calculated_total_sum);如果 ($("#percent").text() > 1000) {$("#percent").css('颜色', '红色');}别的{$("#percent").css('颜色', '绿色');}});});//成分过敏原$('div.tags').delegate('input:checkbox', 'change', function() {$(this).parent().nextAll().slice(0, 2).hide().val('0');var list = $('.results > li').hide();//对于每一个检查$('input:checked').each(function() {list.filter('.' + $(this).attr('rel')).show();$(this).parent().nextAll().slice(0, 2).show();});}).find('input:checkbox').change();$(".tags").on('input', '.txtCal', function () {varcalculated_total_sum = 0;$(".tags .txtCal").each(function () {var get_textbox_value = $(this).val();如果 ($.isNumeric(get_textbox_value)) {calculated_total_sum += parseFloat(get_textbox_value);}});$("#percent").val(calculated_total_sum);});无功SVG；函数 drawProgress(end){d3.select("svg").remove()如果(SVG){svg.selectAll("*").remove();}var wrapper = document.getElementById('radialprogress');无功开始= 0;var 颜色 = {填充:'#FF0000'，轨道:'#555555'，文本:'#00C0FF'，中风:'#FFFFFF'，}无功半径= 80;无功边界= 12;varstrokeSpacing = 4;var endAngle = Math.PI * 2;var formatText = d3.format('.0%');var boxSize = 半径 * 2;无功计数=结束；var 进度 = 开始；var step = end <开始 ?-0.01:0.01；//定义圆var circle = d3.svg.arc().startAngle(0).innerRadius(半径).outerRadius(半径 - 边界)；//设置SVG包装器svg = d3.select(包装器).append('svg').attr('宽度', boxSize).attr('高度', boxSize);//添加组容器var g = svg.append('g').attr('transform', 'translate(' + boxSize/2 + ',' + boxSize/2 + ')');//设置轨迹var track = g.append('g').attr('class', 'radial-progress');track.append('路径').attr('fill', colours.track).attr('stroke', colours.stroke).attr('笔画宽度',strokeSpacing + 'px').attr('d', circle.endAngle(endAngle));//添加颜色填充var value = track.append('path').attr('填充', colours.fill).attr('stroke', colours.stroke).attr('笔画宽度',strokeSpacing + 'px');//添加文本值var numberText = track.append('text').attr('fill', colours.text).attr('文本锚', '中间').attr('dy', '.5rem');//更新endAngle的位置value.attr('d', circle.endAngle(endAngle * end));//更新文本值numberText.text(formatText(end));}$('#submitClick').click(function(){var val = parseInt($('#percent').val());drawProgress(val/100)})绘制进度(10/100)}); <div><label><input type="checkbox" 选中 rel="ingredient-2" class="ingredient">成分 2 </label><br><input type="text" class='txtCal'/><br>
<div><label><input type="checkbox" 选中 rel="ingredient-3" class="ingredient">成分 3 </label><br><input type="text" class='txtCal'/><br>
<span><b>TOTAL :</b></span><b><span id="total_sum_value"></span></b><!-- https://stackoverflow.com/questions/49345858/html-how-do-i-generate-a-progress-bar-circle-with-a-percentage-in-and-set-the--><label for="percent">输入一个百分比！</label><input id="percent" name="percent" value=10><button id='submitClick' name='submitButton' >Render</button><div id="radialprogress"></div>
<ul class="结果"><li class="ingredient-1成分-3">α异甲基紫罗兰酮</li><li class="ingredient-1">戊基肉桂醛 (Jasmonal A)</li><li class="ingredient-1">戊基肉桂醇</li><li class="ingredient-1">茴香醇</li><li class="ingredient-1成分-2">苯甲醇</li><li class="ingredient-1成分-2成分-3">苯甲酸苄酯</li><li class="ingredient-2">肉桂酸苄酯</li><li class="ingredient-2">水杨酸苄酯</li><li class="ingredient-2">丁基苯基甲基丙醛 (Lilial)</li><li class="ingredient-2成分-3">肉桂</li><li class="ingredient-3">肉桂醇</li><li class="ingredient-3">柠檬醛</li><li class="ingredient-3">香茅醇</li><li class="ingredient-3">香豆素</li><script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
要在值更改时重新绘制进度圈，只需调用 input 中的 drawProgress() 函数代码> 事件处理程序.
另请注意，您还可以对代码进行一些其他改进:
- 删除嵌套的 document.ready
- 不推荐使用委托，改用 on
$('#percent').text()应该是$('#percent').val()，我假设1000在该行的条件中应该是100.
jQuery($ => {$('#submitClick').click(function() {var val = parseInt($('#percent').val());drawProgress(val/100);}).trigger('点击');$(".tags").on('input', function() {//此处不必要地使用了 2 个循环，已修改//varcalculated_total_sum = $(this).find(".ingredient:checked").map((i, el) => parseFloat($(el).closest("div").find(".txtCal").val())).get().reduce((a, b) => a + b) ||0;varcalculated_total_sum = 0;$(this).find('div:has(.ingredient:checked) .txtCal').each((i, el) =>calculated_total_sum += parseFloat(el.value));$("#percent").val(calculated_total_sum).css('color', parseFloat($("#percent").val()) > 1000 ? 'red' : 'green');drawProgress(calculated_total_sum/100);});//成分过敏原$('div.tags').on('change', 'input:checkbox', function() {$(this).parent().nextAll().slice(0, 2).hide().val('0');var list = $('.results > li').hide();$('input:checked').each(function() {list.filter('.' + $(this).attr('rel')).show();$(this).parent().nextAll().slice(0, 2).show();});}).find('input:checkbox').change();$(".tags").on('input', '.txtCal', function() {varcalculated_total_sum = 0;$(".tags .txtCal").each(function() {var get_textbox_value = $(this).val();如果 ($.isNumeric(get_textbox_value)) {calculated_total_sum += parseFloat(get_textbox_value);}});$("#percent").val(calculated_total_sum);});var svg;函数 drawProgress(end) {d3.select("svg").remove()如果(SVG){svg.selectAll("*").remove();}var wrapper = document.getElementById('radialprogress');无功开始= 0;var 颜色 = {填充:'#FF0000'，轨道:'#555555'，文本:'#00C0FF'，中风:'#FFFFFF'，}无功半径= 80;无功边界= 12;varstrokeSpacing = 4;var endAngle = Math.PI * 2;var formatText = d3.format('.0%');var boxSize = 半径 * 2;无功计数=结束；var 进度 = 开始；var step = end <开始 ?-0.01:0.01；//定义圆var circle = d3.svg.arc().startAngle(0).innerRadius(半径).outerRadius(半径 - 边界)；//设置SVG包装器svg = d3.select(包装器).append('svg').attr('宽度', boxSize).attr('高度', boxSize);//添加组容器var g = svg.append('g').attr('transform', 'translate(' + boxSize/2 + ',' + boxSize/2 + ')');//设置轨迹var track = g.append('g').attr('class', 'radial-progress');track.append('路径').attr('fill', colours.track).attr('stroke', colours.stroke).attr('笔画宽度',strokeSpacing + 'px').attr('d', circle.endAngle(endAngle));//添加颜色填充var value = track.append('path').attr('fill', colours.fill).attr('stroke', colours.stroke).attr('笔画宽度',strokeSpacing + 'px');//添加文本值var numberText = track.append('text').attr('填充', colours.text).attr('文本锚', '中间').attr('dy', '.5rem');//更新endAngle的位置value.attr('d', circle.endAngle(endAngle * end));//更新文本值numberText.text(formatText(end));}});<div><label><input type="checkbox" 选中 rel="ingredient-2" class="ingredient">成分 2 </label><br><input type="text" class='txtCal'/><br>
<div><label><input type="checkbox" 选中 rel="ingredient-3" class="ingredient">成分 3 </label><br><input type="text" class='txtCal'/><br>
<span><b>TOTAL :</b></span><b><span id="total_sum_value"></span></b><label for="percent">输入一个百分比！</label><input id="percent" name="percent" value="0"><button id='submitClick' name='submitButton'>渲染</button><div id="radialprogress"></div>
