JavaScript. Подробное руководство, 6-е издание

<b>      // Отобразить полученную HTML-строку в элементе,</b>
<b>      // ссылка на который была получена выше. </b>
<b>      ad.innerHTML = &quot;&lt;ul&gt;&quot; + list + &quot;&lt;/ul&gt;&quot;;</b>
  
<b>    }</b>
<b>  }</b>
<b>}</b>
<b>// График помесячного изменения остатка по кредиту, а также графики сумм,</b>
<b>// выплачиваемых в погашение кредита и по процентам в HTML-элементе &lt;canvas&gt;.</b>
<b>// Если вызывается без аргументов, просто очищает ранее нарисованные графики, </b>
<b>function chart(principal, interest, monthly, payments) {</b>
<b>  var graph = document.getElementById(&quot;graph&quot;); // Ссылка на тег &lt;canvas&gt;</b>
<b>  graph.width = graph.width; // Магия очистки элемента canvas</b>
<b>  // Если функция вызвана без аргументов или броузер не поддерживает </b>
<b>  // элемент &lt;canvas&gt;, то просто вернуть управление, </b>
<b>  if (arguments.length == 0 || !graph.getContext) return;</b>
<b>  // Получить объект &quot;контекста&quot; для элемента &lt;canvas&gt;,</b>
<b>  // который определяет набор методов рисования</b>
<b>  var g = graph.getContext(&quot;2d&quot;); // Рисование выполняется с помощью этого объекта </b>
<b>  var width = graph.width, height = graph.height; // Получить размер холста</b>
<b>  // Следующие функции преобразуют количество месячных платежей </b>
<b>  // и денежные суммы в пикселы</b>
<b>  function paymentToX(n) { return n * width/payments; }</b>
<b>  function amountToY(a) { return height-(a*height/(monthly*payments*1.05));} </b>
<b>  // Платежи - прямая линия из точки (0,0) в точку (payments,monthly*payments)</b>
<b>  g.moveTo(paymentToX(0), amountToY(0)); // Из нижнего левого угла</b>
<b>  g.lineTo(paymentToX(payments),         // В правый верхний</b>
<b>     amountToY(monthly*payments)); </b>
<b>  g.lineTo(paymentToX(payments), amountToY(0)); // В правый нижний </b>
<b>  g.closePath();                         // И обратно в начало </b>
<b>  g.fillStyle = &quot;#f88&quot;;                  // Светло-красный </b>
<b>  g.fill();                              // Залить треугольник </b>
<b>  g.font = &quot;bold 12px sans-serif&quot;;       // Определить шрифт </b>
<b>  g.fillText(&quot;Total Interest Payments&quot;, 20,20); // Вывести текст в легенде</b>
<b>  // Кривая накопленной суммы погашения кредита не является линейной </b>
<b>  // и вывод ее реализуется немного сложнее</b>
<b>  var equity = 0;</b>
<b>  g.beginPath(); // Новая фигура</b>
<b>  g.moveTo(paymentToX(0), amountToY(O)); // из левого нижнего угла</b>
<b>  for(var р = 1; р &lt;= payments; р++) {</b>
<b>    // Для каждого платежа выяснить долю выплат по процентам</b>
<b>    var thisMonthsInterest = (principal-equity)*interest;</b>
<b>    equity += (monthly - thisMonthsInterest);  // Остаток - погашение кред.</b>
<b>    g.lineTo(paymentToX(p),amountToY(equity)); // Линию до этой точки</b>
<b>  }</b>
<b>  g.lineTo(paymentToX(payments), amountToY(O)); // Линию до оси X</b>
<b>  g.closePath();                                // И опять в нач. точку </b>
<b>  g.fillStyle = &quot;green&quot;;                        // Зеленый цвет </b>
<b>  g.fill();                                     // Залить обл. под кривой </b>
<b>  g.fillText(&quot;Total Equity&quot;, 20,35);            // Надпись зеленым цветом</b>
<b>  // Повторить цикл, как выше, но нарисовать график остатка по кредиту</b>
<b>  var bal = principal; </b>
<b>  g.beginPath();</b>
<b>  g.moveTo(paymentToX(O),amountToY(bal)); </b>
<b>  for(var p = 1; p &lt;= payments; p++) {</b>
<b>    var thisMonthsInterest = bal*interest;</b>
<b>    bal -= (monthly - thisMonthsInterest) //Остаток от погаш. по кредиту</b>
<b>    g.lineTo(paymentToX(p),amountToY(bal)); // Линию до этой точки</b>
<b>  }</b>
<b>  g.LineWidth = 3;     //Жирная линия</b>
<b>  g.stroke;            //Нарисовать кривую графика </b>
  
<b>  g.fillStle=&quot;black&quot;;  //Черный цвет для текста </b>
<b>  g.fillText(&quot;Loan Balabce&quot;, 20, 50); //Элемент легенды</b>