Добавить ещё больше разных колёс

/*массив цветов*/ 
var colors = ['#01931C', '#27475C', '#5292BC', '#351F78', '#451F78', '#5B0682', '#D3026C', '#e1fb2d', '#CE2110', '#CE6110', 
  '#E66D01', '#EFCC00' 
]; 
 
var arrSliders = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]; 
var ctx; 
var count_sectors; 
 
var arr_txtrow1 = ['Здоровье', 'Отношения', 'Окружение', 'Работа', 'Обеспеченность', 'Яркость жизни', 'Самосовершенствование', 'Духовность']; 
var arr_txtrow2 = ['Отношения с детьми', 'Отношения с родителями', 'Отношения с братьями/сестрами', 'Отношения с остальными родственниками', 'Дом, быт и домашние обязанности', 'Образование детей', 'Помощь родителям', 'Будущее']; 
var arr_txtrow3 = ['Уровень независимости', 'Общие интересы', 'Разделение ролей и обязанностей', 'Время, проводимое вместе', 'Планы на будущее', 'Принятие совместных решений', 'Забота друг о друге', 'Любовь и секс']; 
 
$(document).ready(function() { 
  ctx = document.getElementById("id_cv").getContext("2d"); 
 
  changeCount(); 
  //обработка перемещения слайдера 
  $('.easyui-slider').slider({ 
    onSlideEnd: function() { 
      createDiagram(); 
    } 
  }) 
  /*прослушивание ссылки на загрузку JPG*/ 
  document.getElementById('download').addEventListener('click', download, false); 
}) 
 
 
//загрузка JPG 
function download() { 
  var canvas = document.getElementById("id_cv"); 
  var dt = canvas.toDataURL('image/jpeg'); 
  this.href = dt; 
}; 
 
 
//обновляет массив со значениями слайдеров радиуса (веса) 
function reNewSlidersValue() { 
  for (a = 1; a < 13; a++) { 
    arrSliders[a - 1] = document.getElementById('es' + a).value; 
  } 
} 
 
 
/*возвращает радианы из градусов*/ 
function Radian(gradus) { 
  return (Math.PI / 180) * gradus; 
} 
 
 
//выводит название колеса, набираемое в шапке левой колонки 
function writeNameRing() { 
  var name = document.getElementById('inpNameRing').value; 
  /*в h1*/ 
  document.getElementById('lblNameRing').innerHTML = name; 
  /*очистка*/ 
  ctx.fillStyle = '#fff'; 
  ctx.fillRect(20, 10, 260, 30); 
 
  ctx.fillStyle = "#000"; 
  ctx.font = "12pt Arial"; 
  ctx.fillText(name, 30, 30); 
} 
 
 
//выводит имя, набираемое в шапке левой колонки 
function writeName() { 
  var name = document.getElementById('name').value; 
  /*очистка*/ 
  ctx.fillStyle = '#fff'; 
  ctx.fillRect(40, 340, 240, 30); 
 
  ctx.fillStyle = "#000"; 
  ctx.font = "12pt Arial"; 
  ctx.fillText(name, 50, 360); 
} 
 
 
//B-база, R-радиус, A-угол от оси 0 (на 3 часа) 
function getXY_byAngle(B, R, A) { 
  var x = B / 2 + R * Math.cos(A); 
  var y = B / 2 + R * -Math.sin(A); 
 
  return [x, y]; 
}; 
 
 
 
//выводит номер сектороа 
function writeNum(count_sectors) { 
  ctx.fillStyle = colors[a]; 
  ctx.font = "16pt Arial"; 
  var angleOneSector = 360 / count_sectors; 
 
  for (a = 0; a < count_sectors; a++) { 
    ctx.fillStyle = colors[a]; 
    //360- т.к. углы по умолчанию считаются против часовой, а мне надо ПО часовой 
    var point = getXY_byAngle(380, 123, Radian(359 - a * angleOneSector - (angleOneSector / 2))); 
 
    ctx.fillText(a + 1, point[0] - 48, point[1] + 0); //коррекция X, Y 
  } 
} 
 
 
/*рисование на канвасе*/ 
function createDiagram() { 
  var start = finish = 0; 
  count_sectors = document.getElementById("count-sectors").value; 
  count_sectors = count_sectors.substr(3); 
  var cntSectors = parseInt(count_sectors); 
  var oneSector = 360 / cntSectors; 
 
  ctx = document.getElementById("id_cv").getContext("2d"); 
  ctx.fillStyle = '#fff'; /*test #fff */ 
  ctx.fillRect(0, 0, 300, 680); //очистка canvas 0,0, ширина, высота  
 
  var xc = 150, 
    yc = 180, 
    radius = 136; 
  var min_radius = radius / 12; 
 
  reNewSlidersValue(); //обновление значений в arrSliders[] с радиусами 
  /*рисуем цветные секотра*/ 
  for (a = 0; a < count_sectors; a++) { 
    start = finish; 
    finish = start + oneSector; 
    ctx.fillStyle = colors[a]; 
    ctx.beginPath(); 
    ctx.arc(xc, yc, min_radius * arrSliders[a], Radian(start), Radian(finish)); 
    ctx.lineTo(xc, yc); 
    ctx.fill(); 
  } 
 
  //рисуем окружности 
  for (a = 1; a < 12; a++) { 
    if (a == 11) continue; /*наружнее кольцо состоит из двух, 11 не показываем*/ 
    ctx.beginPath(); 
    ctx.arc(xc, yc, min_radius * a, 0, Radian(360)); 
    ctx.strokeStyle = "rgba(155,155,155,.7)" 
    ctx.stroke(); 
  } 
 
 
  /*рисуем перегородки между секторами*/ 
  for (a = 0; a < count_sectors; a++) { 
    start = finish; 
    finish = start + oneSector; 
    ctx.fillStyle = colors[a]; 
    ctx.beginPath(); 
    ctx.arc(xc, yc, radius, Radian(start), Radian(finish)); 
    ctx.lineTo(xc, yc); 
    ctx.stroke(); 
  } 
 
  writeNum(count_sectors); 
  createTable(); 
  writeName(); 
  writeNameRing(); 
} 
 
 
 
//при изменении числа секторов 
function changeCount() { 
  var ansver = $('#count-sectors').val(); 
 
  $('.grp4, .grp6, .grp8, .grp10, .grp12').css('display', 'none'); /*отключаем видимость*/ 
  $('.' + ansver).css('display', 'block'); /*включаем необходимые*/ 
 
  $('#inpNameRing') 
 
  createDiagram(); 
} 
 
//при изменении числа секторов 
 
 
function fill_txt_rows(name_ring) { 
  if (name_ring === 'Колесо Жизненного Баланса') { 
    for (i = 0; i < 8; i++) { 
      $('#txt_row' + (i + 1)).val(arr_txtrow1[i]); 
    } else if (name_ring === 'Колесо Отношений') { 
      for (i = 0; i < 8; i++) { 
        $('#txt_row' + (i + 1)).val(arr_txtrow2[i]); 
      } else if name_ring === 'Колесо Любви') { 
      for (i = 0; i < 8; i++) { 
        $('#txt_row' + (i + 1)).val(arr_txtrow3[i]); 
      } 
    } 
  } 
 
 
  //при изменении предустановленного типа колеса 
  function changeType() { 
    var ansver = $('#type-wheel').val(); 
    if (ansver === 'Колесо Жизненного Баланса') { //устанавливаю кол-во секторов 
      $('#count-sectors').val('grp8'); 
      changeCount(); 
    } else if (ansver === 'Колесо Отношений') { 
      $('#count-sectors').val('grp8'); 
      changeCount(); 
    } else if (ansver === 'Колесо Любви') { 
      $('#count-sectors').val('grp8'); 
    } 
 
    fill_txt_rows(ansver); //заполняем поля с именами свойств 
 
    $('#inpNameRing').val(ansver); // отображаю в поле ввода имени колеса 
    writeNameRing(); // на canvas 
    createTable(); 
  } 
 
 
 
  //создается и обновляется таблица в canvas 
  function createTable() { 
    ctx.fillStyle = "#000"; 
    ctx.font = "12pt Arial"; 
    ctx.fillText(" №    Сектор                               Баллы", 10, 400); 
 
 
    for (a = 0; a < count_sectors; a++) { 
      ctx.fillStyle = '#666'; 
      ctx.fillText(a + 1 + '.', 20, 440 + a * 20); /*номер строки*/ 
      ctx.fillText(arrSliders[a], 240, 440 + a * 20); /*величина свойства*/ 
 
      txtOut(a + 1); /*название свойства*/ 
    } 
  } 
 
 
 
  //при вводе названий в поля 
  function txtOut(row) { 
    /*очищаем таблицу в канвасе*/ 
    ctx.fillStyle = '#fff'; 
    ctx.fillRect(40, 420 + (row * 20) - 20, 200, 30); 
 
    txtRow = document.getElementById('txt_row' + row).value; 
 
    ctx.fillStyle = "#000"; 
    ctx.font = "12pt Arial"; 
    ctx.fillText(txtRow, 50, 441 + (row * 20) - 22); 
  }

<div class="wrapper"> 
  <header> 
    <div class="title"> 
      <h1 id="lblNameRing"> Колесо жизни </h1> 
    </div> 
    <!-- <link rel="stylesheet" href="../koleso/style.css"/>--> 
  </header> 
 
  <head> 
    <script src="scrypt.js"></script> 
  </head> 
  <div id='main'> 
    <div class="hh"> 
      <div class="direction"> 
        Название колеса: <input type="text" id="inpNameRing" maxlength="28" onKeyUp="writeNameRing()"> Ваше имя: <input type="text" id="name" maxlength="18" onKeyUp="writeName()"> 
 
        <i> Выберите одно из заготовленных колес баланса </i> <br> 
        <select id="0" onChange="changeType()" class="combobox" name="type" style="width:245px;"> 
          <option value=" "> </option> 
          <option id="type-wheel">Колесо Жизненного Баланса</option> 
          <option id="type-wheel">Колесо Отношений</option> 
          <option id="type-wheel">Колесо Любви</option> 
        </select> 
        <i>Или создайте свое:</i> Количество секторов: 
        <select id="count-sectors" onChange="changeCount()" class="combobox" name="count" style="width:50px;"> 
          <option value="grp4">4</option> 
          <option value="grp6">6</option> 
          <option value="grp8">8</option> 
          <option value="grp10">10</option> 
          <option value="grp12">12</option> 
        </select> 
 
        <!--двухколоночная таблица с секторами--> 
        <div class="sectors-tabl"> 
          <div class="st-row"> 
            <div class="st-col-num">№</div> 
            <div class="st-col-left"> Названия секторов: </div> 
            <div class="st-col-right"> Баллы: </div> 
          </div> 
          <br> 
 
          <div id="st-row1" class="grp4 grp6 grp8 grp10 grp12"> 
            <div class="st-col-num">1</div> 
            <div class="st-col-left"> <input type="text" id="txt_row1" maxlength="20" onKeyUp="txtOut(1)" /></div> 
            <div class="st-col-right"> 
              <input id="es1" class="easyui-slider" style="width:115px" data-options="showTip:true,min:1,max:10,step:1"> 
            </div> 
          </div> 
          <div id="st-row2" class="grp4 grp6 grp8 grp10 grp12"> 
            <div class="st-col-num">2</div> 
            <div class="st-col-left"> <input type="text" id="txt_row2" maxlength="20" onKeyUp="txtOut(2)" /></div> 
            <div class="st-col-right"> 
              <input id="es2" class="easyui-slider" style="width:115px" data-options="showTip:true,min:1,max:10,step:1"> 
            </div> 
          </div> 
          <div id="st-row3" class="grp4 grp6 grp8 grp10 grp12"> 
            <div class="st-col-num">3</div> 
            <div class="st-col-left"> <input type="text" id="txt_row3" maxlength="20" onKeyUp="txtOut(3)" /></div> 
            <div class="st-col-right"> 
              <input id="es3" class="easyui-slider" style="width:115px" data-options="showTip:true,min:1,max:10,step:1"> 
            </div> 
          </div> 
          <div id="st-row4" class="grp4 grp6 grp8 grp10 grp12"> 
            <div class="st-col-num">4</div> 
            <div class="st-col-left"> <input type="text" id="txt_row4" maxlength="20" onKeyUp="txtOut(4)" /></div> 
            <div class="st-col-right"> 
              <input id="es4" class="easyui-slider" style="width:115px" data-options="showTip:true,min:1,max:10,step:1"> 
            </div> 
          </div> 
          <div id="st-row5" class="grp6 grp8 grp10 grp12"> 
            <div class="st-col-num">5</div> 
            <div class="st-col-left"> <input type="text" id="txt_row5" maxlength="20" onKeyUp="txtOut(5)" /></div> 
            <div class="st-col-right"> 
              <input id="es5" class="easyui-slider" style="width:115px" data-options="showTip:true,min:1,max:10,step:1"> 
            </div> 
          </div> 
          <br><br> 
          <div id="st-row6" class="grp6 grp8 grp10 grp12"> 
            <div class="st-col-num">6</div> 
            <div class="st-col-left"> <input type="text" id="txt_row6" maxlength="20" onKeyUp="txtOut(6)" /></div> 
            <div class="st-col-right"> 
              <input id="es6" class="easyui-slider" style="width:115px" data-options="showTip:true,min:1,max:10,step:1"> 
            </div> 
          </div> 
          <div id="st-row7" class="grp8 grp10 grp12"> 
            <div class="st-col-num">7</div> 
            <div class="st-col-left"> <input type="text" id="txt_row7" maxlength="20" onKeyUp="txtOut(7)" /></div> 
            <div class="st-col-right"> 
              <input id="es7" class="easyui-slider" style="width:115px" data-options="showTip:true,min:1,max:10,step:1"> 
            </div> 
          </div> 
          <div id="st-row8" class="grp8 grp10 grp12"> 
            <div class="st-col-num">8</div> 
            <div class="st-col-left"> <input type="text" id="txt_row8" maxlength="20" onKeyUp="txtOut(8)" /></div> 
            <div class="st-col-right"> 
              <input id="es8" class="easyui-slider" style="width:115px" data-options="showTip:true,min:1,max:10,step:1"> 
            </div> 
          </div> 
          <div id="st-row9" class="grp10 grp12"> 
            <div class="st-col-num">9</div> 
            <div class="st-col-left"> <input type="text" id="txt_row9" maxlength="20" onKeyUp="txtOut(9)" /></div> 
            <div class="st-col-right"> 
              <input id="es9" class="easyui-slider" style="width:115px" data-options="showTip:true,min:1,max:10,step:1"> 
            </div> 
          </div> 
          <div id="st-row10" class="grp10 grp12"> 
            <div class="st-col-num">10</div> 
            <div class="st-col-left"> <input type="text" id="txt_row10" maxlength="20" onKeyUp="txtOut(10)" /></div> 
            <div class="st-col-right"> 
              <input id="es10" class="easyui-slider" style="width:115px" data-options="showTip:true,min:1,max:10,step:1"> 
            </div> 
          </div> 
          <div id="st-row11" class="grp12"> 
            <div class="st-col-num">11</div> 
            <div class="st-col-left"> <input type="text" id="txt_row11" maxlength="20" onKeyUp="txtOut(11)" /></div> 
            <div class="st-col-right"> 
              <input id="es11" class="easyui-slider" style="width:115px" data-options="showTip:true,min:1,max:10,step:1"> 
            </div> 
          </div> 
          <div id="st-row12" class="grp12"> 
            <div class="st-col-num">12</div> 
            <div class="st-col-left"> <input type="text" id="txt_row12" maxlength="20" onKeyUp="txtOut(12)" /></div> 
            <div class="st-col-right"> 
              <input id="es12" class="easyui-slider" style="width:115px" data-options="showTip:true,min:1,max:10,step:1"> 
            </div> 
          </div> 
 
        </div> 
        <!--/двухколоночная таблица с секторами--> 
      </div> 
 
      <div class="diagram"> 
        <canvas id="id_cv" width="300" height="680"> </canvas> 
 
        <center style="padding-top: 10px;"> 
          <a id="download" class="btn" href="#" download="колесо жизни.png" title="Загрузка изображения">Скачать</a> 
          <button class="btn" onClick="print();" style="margin-left: 30px;display: inline-block;font-size: 17px;background-color: #58B9DA;box-shadow: 1px 1px 3px rgba(0,0,0,.4);text-decoration: none;padding: 7px;border-radius: 50px;color: white;padding-left: 15px;padding-right: 15px;">Печатать</button> 
        </center> 
 
        <div style="margin-top: 0px; text-align: center;"> 
          <!--<a href="#">  <img src="images/donate_button.png" alt="" />     </a> --> 
 
 
 
        </div> 
 
      </div> 
    </div> 
 
 
  </div> 
  <!--//main--> 
 
 
  <div class="clearfix"></div> 
 
</div> 
 
<script> 
  createDiagram(); 
</script>