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

 // Отобразить полученную HTML-строку в элементе,

 // ссылка на который была получена выше. 

 ad.innerHTML = "<ul>" + list + "</ul>";

 }

}

<b>// График помесячного изменения остатка по кредиту, а также графики сумм,</b>

<b>// выплачиваемых в погашение кредита и по процентам в HTML-элементе &lt;canvas&gt;.</b>

<b>// Если вызывается без аргументов, просто очищает ранее нарисованные графики, </b>

function chart(principal, interest, monthly, payments) {

 var graph = document.getElementById("graph"); // Ссылка на тег <canvas>

 graph.width = graph.width; // Магия очистки элемента canvas

<b>  // Если функция вызвана без аргументов или броузер не поддерживает </b>

 // элемент <canvas>, то просто вернуть управление, 

 if (arguments.length == 0 || !graph.getContext) return;

 // Получить объект "контекста" для элемента <canvas>,

 // который определяет набор методов рисования

<b>  var g = graph.getContext(&quot;2d&quot;); // Рисование выполняется с помощью этого объекта </b>

 var width = graph.width, height = graph.height; // Получить размер холста

<b>  // Следующие функции преобразуют количество месячных платежей </b>

 // и денежные суммы в пикселы

 function paymentToX(n) { return n * width/payments; }

 function amountToY(a) { return height-(a*height/(monthly*payments*1.05));} 

 // Платежи - прямая линия из точки (0,0) в точку (payments,monthly*payments)

 g.moveTo(paymentToX(0), amountToY(0)); // Из нижнего левого угла

 g.lineTo(paymentToX(payments), // В правый верхний

 amountToY(monthly*payments)); 

 g.lineTo(paymentToX(payments), amountToY(0)); // В правый нижний 

 g.closePath(); // И обратно в начало 

 g.fillStyle = "#f88"; // Светло-красный 

 g.fill(); // Залить треугольник 

 g.font = "bold 12px sans-serif"; // Определить шрифт 

 g.fillText("Total Interest Payments", 20,20); // Вывести текст в легенде

<b>  // Кривая накопленной суммы погашения кредита не является линейной </b>

 // и вывод ее реализуется немного сложнее

 var equity = 0;

 g.beginPath(); // Новая фигура

 g.moveTo(paymentToX(0), amountToY(O)); // из левого нижнего угла

 for(var р = 1; р <= payments; р++) {

 // Для каждого платежа выяснить долю выплат по процентам

 var thisMonthsInterest = (principal-equity)*interest;

 equity += (monthly - thisMonthsInterest); // Остаток - погашение кред.

 g.lineTo(paymentToX(p),amountToY(equity)); // Линию до этой точки

 }

 g.lineTo(paymentToX(payments), amountToY(O)); // Линию до оси X

<b>  g.closePath();                                // И опять в нач. точку </b>

 g.fillStyle = "green"; // Зеленый цвет 

<b>  g.fill();                                     // Залить обл. под кривой </b>

<b>  g.fillText(&quot;Total Equity&quot;, 20,35);            // Надпись зеленым цветом</b>

<b>  // Повторить цикл, как выше, но нарисовать график остатка по кредиту</b>

 var bal = principal; 

 g.beginPath();

 g.moveTo(paymentToX(O),amountToY(bal)); 

 for(var p = 1; p <= payments; p++) {

 var thisMonthsInterest = bal*interest;

 bal -= (monthly - thisMonthsInterest) //Остаток от погаш. по кредиту

 g.lineTo(paymentToX(p),amountToY(bal)); // Линию до этой точки

 }

 g.LineWidth = 3; //Жирная линия

 g.stroke; //Нарисовать кривую графика 

 g.fillStle="black"; //Черный цвет для текста 

 g.fillText("Loan Balabce", 20, 50); //Элемент легенды