Javascript 多个圆形图

Question

我使用 javascript 制作了一个工作圆形图，但遇到了一个问题。 该脚本获取图形的 ID 以便工作，但我想要多个图形。

所以这是我的问题:如何使脚本与多个图形兼容？我试着按他们的类(class)取他们，但这似乎没有用。

这是我的代码:

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

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

var canvas = document.createElement('canvas');
var span = document.createElement('span');
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

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 = 'butt'; // butt, round or square
    ctx.lineWidth = lineWidth
    ctx.stroke();
};

drawCircle('#F7F7F7', options.lineWidth, 100 / 100);
drawCircle(options.color, options.lineWidth, options.percent / 100);

这是 HTML:

<div class="chart" id="graph" 
    data-percent="92" 
    data-color="#1EA1FF" 
    data-size="110" data-line="3">
</div>

提前致谢。

Answer 1

您应该能够用循环包围所有内容。您需要将具有相同类的所有元素选择到一个数组中，然后循环遍历该数组。我还建议在数组中设置“el”变量，这样您就不必更改代码:

var graphs = document.getElementsByClassName("chart");
for(var i = 0; i < graphs.length; i++)
{
   var el = graphs[i];
   //Now the rest of your code
   var options = ... 
}

然后“el”成为循环迭代时的每个元素。