HTML-如何生成带有百分比的进度条圆并使用JS或jQuery设置值？ [英] HTML - How do I generate a progress bar circle with a percentage in and set the value with JS or jQuery?

问题描述

我需要有一个圆形的进度条，可以用来向用户显示他们在测试中所占的百分比。理想情况下，将有一些固定的HTML，然后更改JavaScript或jQuery中的值。他们可能看起来像下面的任何圈子。

I need to have a circular progress bar which I can use to show a user what percent they got in a test. Ideally, there would be some fixed HTML and then change the value in the JavaScript or jQuery. They could look like any of the circles below.

谢谢。

推荐答案

您可能正在寻找一个

var svg ;

function drawProgress(end){ 
d3.select("svg").remove() 
  if(svg){
  svg.selectAll("*").remove();
  
}
var wrapper = document.getElementById('radialprogress');
var start = 0;
 
var colours = {
  fill: '#FF0000',
  track: '#555555',
  text: '#00C0FF',
  stroke: '#FFFFFF',
}

var radius = 80;
var border = 12;
var strokeSpacing = 4;
var endAngle = Math.PI * 2;
var formatText = d3.format('.0%');
var boxSize = radius * 2;
var count = end;
var progress = start;
var step = end < start ? -0.01 : 0.01;

//Define the circle
var circle = d3.svg.arc()
  .startAngle(0)
  .innerRadius(radius)
  .outerRadius(radius - border);

//setup SVG wrapper
svg = d3.select(wrapper)
  .append('svg')
  .attr('width', boxSize)
  .attr('height', boxSize);

  
// ADD Group container
var g = svg.append('g')
  .attr('transform', 'translate(' + boxSize / 2 + ',' + boxSize / 2 + ')');

//Setup track
var track = g.append('g').attr('class', 'radial-progress');
track.append('path')
  .attr('fill', colours.track)
  .attr('stroke', colours.stroke)
  .attr('stroke-width', strokeSpacing + 'px')
  .attr('d', circle.endAngle(endAngle));

//Add colour fill
var value = track.append('path')
  .attr('fill', colours.fill)
  .attr('stroke', colours.stroke)
  .attr('stroke-width', strokeSpacing + 'px');

//Add text value
var numberText = track.append('text')
  .attr('fill', colours.text)
  .attr('text-anchor', 'middle')
  .attr('dy', '.5rem'); 

  //update position of endAngle
  value.attr('d', circle.endAngle(endAngle * end));
  //update text value
  numberText.text(formatText(end));
  
}

$('#submitClick').click(function(){
  var val = parseInt($('#percent').val());
   drawProgress(val/100)
})
 
drawProgress(10/100)

<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>
 

<label for="percent">Type a percent!</label>
<input id="percent" name="percent" value=10>
<button id='submitClick' name='submitButton' >Render</button>


<div id="radialprogress" 
</div> 

这篇关于HTML-如何生成带有百分比的进度条圆并使用JS或jQuery设置值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！