如何在同一页面中添加两个径向进度条（JS）

Question

我正在尝试在同一页面中插入两个相同的径向进度条，但第二个的代码被忽略/不可见。 这肯定是 JS 问题，所以我在这里寻求您的帮助。

JS代码：

 var el = document.getElementById('graph'); // get canvas

 var options = {
percent:  el.getAttribute('data-percent') || 25,
size: el.getAttribute('data-size') || 120,
lineWidth: el.getAttribute('data-line') || 10,
rotate: el.getAttribute('data-rotate') || 0
 }

 var canvas = document.createElement('canvas');
 var span = document.createElement('span3');
 span.textContent = options.percent + '%';

 if (typeof(G_vmlCanvasManager) !== 'undefined') {
G_vmlCanvasManager.initElement(canvas);
 }

 var ctx = canvas.getContext('2d');
 canvas.width = canvas.height = options.size;

 el.appendChild(span);
 el.appendChild(canvas);

 ctx.translate(options.size / 2, options.size / 2); // change center
 ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg

 //imd = ctx.getImageData(0, 0, 240, 240);
 var radius = (options.size - options.lineWidth) / 2;

 var drawCircle = function(color, lineWidth, percent) {
    percent = Math.min(Math.max(0, percent || 1), 1);
    ctx.beginPath();
    ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
    ctx.strokeStyle = color;
    ctx.lineCap = 'round'; // butt, round or square
    ctx.lineWidth = lineWidth
    ctx.stroke();
 };

 drawCircle('#efefef', options.lineWidth, 100 / 100);
 drawCircle('#555555', options.lineWidth, options.percent / 100);

使用具有唯一 id 的容器 div 在正文中调用每个条：

 <div id="graph"></div>

如何在同一页面中使用此代码两次或/如何将此进度条显示两次？ 谢谢！

Answer 1

多个元素不能有相同的 ID。如果您打算将它应用于多个元素，它需要是一个类。如果您在多个元素上具有相同的 ID，则选择器将在找到的第一个元素处停止。