Побудова гістограм за допомогою JavaScript

"Свято, яке завжди з тобою" писав Хемінгуей про Париж і вино. Якщо дати волю уяві, то цю фразу можна застосувати і до JavaScript. Потрібен простий розрахунок, використовуємо зовнішній або вбудований калькулятор. Серйозний розрахунок – без спеціалізованої програми не обійтися. А от у випадку проміжному відмінно працює JavaScript. "На коленочках" (в "блокноті") набираємо кілька програмних рядків, зберігаємо як html-файл, відкриваємо його в браузер, і вуаля! Рішення на екрані. Сподіваюся, ви не допустили помилок в коді 😉
Ви можете використовувати javascript для побудови гістограм. Найчастіше це прискорює процес створення сторінки (потрібно ввести тільки декілька цифр) і зменшує розмір, який займає підсумкова сторінка (розмір тексту плюс розмір картинок).

Приклад 1. Площі територій країн світу, млн. кв. км

Приклад 2. Найбільш населені країни в 2004, млн. жітілей

Нижче наведено javascript-код для побудови гістограм.

<script>

var arrText = new Array ("Російська Федерація", "Канада", "Китай", "США", "Бразилія");

var arrValue = new Array (17.075, 9.976, 9.596, 9.363, 8.511);

drawGraphHoriz( arrText, arrValue, 400, 0 );

</script>
<script>

var arrText2 = new Array ("China", "India", "USA", "Indonesia", "Brazil", "Pakistan", "Russia", "Bangladesh", "Nigeria", "Japan", "Mexico") ;

var arrValue2 = new Array (1286, 1049, 290, 234, 182, 150, 144, 138, 133, 127, 104);
drawGraphVert( arrText2, arrValue2, 400, 0, 60 );

</script>

Нижче наведено javascript-код підтримки побудови гістограм.

<script>

//red, orange, yellow, green, blue, violet, cyan, gray

var arrCol8 = new Array ("# ff0000", "# ffaa00", "# ffff00", "# 00ff00", "# 00aaff", "# 0000bb", "# aa00aa", "# cccccc");

function drawGraphHoriz( arrText, arrValue, width, border )

{

 var i, j;

 if( “” + width == “undefined” ) width = 400;

 if( “” + border == “undefined” ) border = 1;
 var nCol = arrCol8.length;

 var len = arrText.length;

 var dMax = 0, iWidthSpan;

 for( i = 0; i < arrValue.length; i++ )

 {

  if( dMax < arrValue[ i ] ) dMax = arrValue[ i ];

 }
 document.writeln( “<table border=”” + border + “”>” );
 for( i = 0; i < arrText.length; i++ )

 {

  j = i % nCol;

  iWidthSpan =  Math.ceil( ( arrValue[ i ] * width ) / dMax );

  document.writeln( “<tr>” );

document.writeln ("<td>" + arrText [i] + "</ td>");

document.writeln ("<td> <span style =" background-color: "+ arrCol8 [j] +

"; Width:" + iWidthSpan + ""> "+ arrValue [i] +" </ span> </ td> ");

  document.writeln( “</tr>” );

 }
 document.writeln( “</table>” );

}
function drawGraphVert (arrText, arrValue, height, border, width)

{

 var i, j;

 if( “” + height == “undefined” ) height = 400;

 if( “” + border == “undefined” ) border = 1;

 if( “” + width == “undefined” ) width = 0;
 var nCol = arrCol8.length;

 var len = arrText.length;

 var dMax = 0, iHeightSpan;

 for( i = 0; i < arrValue.length; i++ )

 {

  if( dMax < arrValue[ i ] ) dMax = arrValue[ i ];

 }
 document.writeln( “<table border=”” + border + “”>” );

 document.writeln( “<tr>” );
 for( i = 0; i < arrText.length; i++ )

 {

  j = i % nCol;

iHeightSpan = Math.ceil ((arrValue [i] * height) / dMax);

document.writeln ("<td align="center" valign="bottom"> <span style =" background-color: "+ arrCol8 [j] +

"; Width: 30px; height:" + iHeightSpan + "px"> "+ arrValue [i] +" </ span> </ td> ");

 }

 document.writeln( “</tr>” );
 document.writeln( “<tr>” );

 for( i = 0; i < arrText.length; i++ )

 {

  document.writeln( “<td” );

if (width> 0) document.writeln ("width =" "+ width +" "");

document.writeln ("align =" center ">" + arrText [i] + "</ td>");

 }

 document.writeln( “</tr>” );
 document.writeln( “</table>” );

}

</script>

Трохи коментарів.
Для зберігання квітів використовується масив arrCol8. "На смак і на колір товаришів немає". Міняйте на здоров'я.
Значення аргументів функції drawGraphHoriz (arrText, arrValue, width, border):

arrText – масив назв,

arrValue – масив числових значень,

width – ширина гістограм,

border – ширина бордюру елементів таблиці.
Алгоритм. Знаходимо максимальне числове значення в масиві arrValue – dMax. Виводимо в документ заголок таблиці <table>, потім для кожного елемента arrText створюємо клітинку <td>, в такій клітинці створюємо елемент <span>, в стилі якого прописуємо колір arrCol8 [j] і ширину iWidthSpan (яка пропорційна arrValue [i] і обернено пропорційна dMax). Закриваємо таблицю </ table>.
Функція drawGraphVert має додатковий аргумент, який управляє шириною елементів таблиці.

Наведені функції страждають недоліком обробки помилок і малої параметризацією (наприклад, немає управління кольором фону). Роботу над їх усуненням будемо вважати домашнім завданням. Результати пишіть в форум.

Схожі статті:

• JavaScript робота з Web-формами (0)
• XHTML, говорите? (0)
• Введення (0)
• Як змусити AJAX читати між рядків (0)
• Приступаємо до роботи з проектом Word (0)
• Доступ з JavaScript до змінних (0)
• Запобігаючи сценарії переривання операції (0)

---

Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

ЕasyСode