Побудова гістограм за допомогою 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 має додатковий аргумент, який управляє шириною елементів таблиці.

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

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


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

    Коментарів поки що немає.

    Ваш отзыв

    Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

    *

    *