Question

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

所以这是我的问题：如何使脚本与多个图形兼容？我尝试过他们的课程，但这似乎没有用。

这是我的代码：

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”然后在循环迭代时成为每个元素。

Javascript多个圆形图

1 个答案: