Отправляет email-рассылки с помощью сервиса Sendsay

Секреты программирования

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Раскрутка сайта: полезные штуки :)" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

  Декабрь 2006   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
code guru

Статистика

0 подписчиков
0 за неделю
←   Все выпуски   →

Секреты программирования: Построение гистограмм с помощью JavaScript


Уважаемые подписчики!

Поздравляю с наступающими Новым годом и Рождеством! Желаю вам здоровья, благополучия, удачи в начинаниях!

Сегодняшняя тема - "Построение гистограмм с помощью JavaScript"
Для улучшения "обратной связи" приглашаю обсудить рассылку на форуме сайта http://www.pvobr.ru в разделе "Программирование". Пишите также, какие темы вы хотите рассмотреть в будущем.

"Праздник, который всегда с тобой" писал Хемингуэй про Париж и вино. Если дать волю воображению, то эту фразу можно применить и к 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 имеет дополнительный аргумент, который управляет шириной ячеек таблицы.

    Приведенные функции страдают недостатком обработки ошибок и малой параметризацией (например, нет управления цветом фона). Работу над их устранением будем считать домашним заданием. Результаты пишите в форум.

    Успехов!
    Андрей
    В избранное