Побудова гістограм за допомогою 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):
Алгоритм. Знаходимо максимальне числове значення в масиві 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 , щоб автоматично отримувати інформацію про нові статтях.
Коментарів поки що немає.
Ваш отзыв
Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>