Я использовал это из другого вопроса stackoverflow: http://jsfiddle.net/Aapn8/3410/, чтобы создать круговые индикаторы выполнения.

За исключением случаев, когда я пытаюсь создать больше 1, ничего не происходит, как вы можете исправить это, не копируя JavaScript и изменив только 1 var.

Это мой код:

.circleWrapper {
  width: 250px;
  float: left;
}
.circleText {} .circleTextSmall {} #graph div {
  position: relative;
  margin: 80px;
  width: 220px;
  height: 220px;
}
#graph canvas {
  display: block;
  top: 0;
  left: 0;
}
#graph span {
  color: #555;
  display: block;
  line-height: 220px;
  text-align: center;
  width: 220px;
  font-family: sans-serif;
  font-size: 40px;
  font-weight: 100;
  margin-left: 5px;
}
#graph input {
  width: 200px;
}
<div class="circleWrapper">
  <div class="chart" id="graph" data-percent="50"></div>
  <div class="circleText">HTML/CSS</div>
  <div class="circleTextSmall">Small text</div>
</div>

<div class="circleWrapper">
  <div class="chart" id="graph" data-percent="45"></div>
  <div class="circleText">PHP</div>
  <div class="circleTextSmall">Small text</div>
</div>
2
Nick Audenaerde 8 Янв 2017 в 12:55

4 ответа

Лучший ответ
var els = document.getElementsByClassName("chart");
for(var i=0; i < els.length; i++){

    var el = els[i];

    var options = {
        percent:  el.getAttribute('data-percent') || 25,
        size: el.getAttribute('data-size') || 220,
        lineWidth: el.getAttribute('data-line') || 15,
        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

    //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);
}
div {
    position:relative;
    margin:80px;
    width:220px; height:220px;
}
canvas {
    display: block;
    position:absolute;
    top:0;
    left:0;
}
span {
    color:#555;
    display:block;
    line-height:220px;
    text-align:center;
    width:220px;
    font-family:sans-serif;
    font-size:40px;
    font-weight:100;
    margin-left:5px;
}

input {
    width: 200px;
}

span {
  
}
<div class="chart"  data-percent="88"></div>
<div class="chart"  data-percent="78"></div>
3
yarwest 8 Янв 2017 в 10:26

Все, что вам нужно сделать, это определить уникальные идентификаторы в вашем HTML, а также определить массив всех элементов вашего графа и пройтись по логике, смотрите это в качестве примера:

var elements = [{
  'id': 'graph1'
}, {
  'id': 'graph2'
}];

for (var i = 0; i < elements.length; i++) {
  var el = document.getElementById(elements[i]['id']);
  var options = {
    percent: el.getAttribute('data-percent') || 25,
    size: el.getAttribute('data-size') || 220,
    lineWidth: el.getAttribute('data-line') || 15,
    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

  //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);

}
div {
  position: relative;
  margin: 80px;
  width: 220px;
  height: 220px;
}
canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
span {
  color: #555;
  display: block;
  line-height: 220px;
  text-align: center;
  width: 220px;
  font-family: sans-serif;
  font-size: 40px;
  font-weight: 100;
  margin-left: 5px;
}
input {
  width: 200px;
}
span {}
<div class="chart" id="graph1" data-percent="88"></div>
<div class="chart" id="graph2" data-percent="25"></div>
1
Tha'er M. Al-Ajlouni 8 Янв 2017 в 10:14

Используйте функции

Поместите свой код в функцию, которая принимает какой-то способ идентификации конкретного элемента, а затем вызовите эту функцию несколько раз. Вот пример этой скрипки в качестве рабочего примера:

function startGraph(el) { // turn it into a function which accepts an element

  // (Nothing else has changed)
  var options = {
      percent:  el.getAttribute('data-percent') || 25,
      size: el.getAttribute('data-size') || 220,
      lineWidth: el.getAttribute('data-line') || 15,
      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

  //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);
}

Предполагая, что каждый элемент имеет class="chart", вы можете получить все элементы и вызвать функцию для каждого из них:

// Get all charts:
var myCharts=document.getElementsByClassName("chart");

// For each one..
for (var i in myCharts) {
   // Start it:
   startGraph(myCharts[i]);
}
3
Luke Briggs 8 Янв 2017 в 10:15

Вы использовали graph идентификатор дважды. Вы можете использовать идентификатор только один раз для каждого документа.

Атрибут id указывает уникальный идентификатор для элемента HTML (значение должно быть уникальным в документе HTML).

Дополнительную информацию об этом можно найти здесь.

Измените идентификатор на что-то другое и измените JS для взаимодействия с обоими элементами.

Например, это можно сделать с помощью getElementsByClassName(). Эта функция возвращает массив элементов вместо одного элемента.

Я думаю, что лучше всего обернуть все свои функции в функцию со следующей подписью:

function startGraph(el) {
    ...
}

И затем вызовите функцию из этого цикла for:

var elements = document.getElementsByClassName("chart");
var i;
for (i = 0; i < x.length; i++) {
    startGraph(elements[i]);
}

Дополнительную информацию об этом можно найти здесь.

2
yarwest 8 Янв 2017 в 10:35