ФорумыТемы

Новое сообщение

Сообщения темы 'JavaScript. Построение гистограмм'

Фильтр:
содержит   Сортировка   

  

Shurmel 09.02.2010 12:23

В универе задали задачку по JavaScript (изучалось только 3 месяца раз в неделю) Нужно написать скрипт который строил гистограмму по данным из *.txt. файла также должны коректироватся цвет и ширина столбцов!!!
  
  

gliba 09.02.2010 12:48

Cоздаем файл "data.txt" с данными типа

China;1286;
India;1049
USA;290
Indonesia;234
Brazil;182

 

Создаем файл "histo.htm" со скриптом, где добавляем новые команды

var fso = new ActiveXObject( "Scripting.FileSystemObject" );

и read_data() для чтения массивов из файла.

var sInputFile = "c:\\myscripts\\data.txt"; //!!двойные обратные слеши!!

<script type="text/javascript">
//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><div style='background-color:" + arrCol8[ j ] +
   "; width:" + iWidthSpan + "'>&nbsp;" + arrValue[ i ] + "</div></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'><div style='background-color:" + arrCol8[ j ] +
   "; width:30px; height:" + iHeightSpan + "px'>&nbsp;" + arrValue[ i ] + "</div></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>" );
}

function read_data( sInputFile )
{
 var ForReading = 1;
 var f = fso.OpenTextFile( sInputFile, ForReading );
 while (!f.AtEndOfStream)
 {
  var r = f.ReadLine();
  var arr = r.split( ";" );
  if( arr.length >= 2 )
  {
   arrText[ arrText.length ] = arr[ 0 ];
   arrValue[ arrValue.length ] = 1 * arr[ 1 ];
  }
 }
// for( var i = 0; i < arrText.length; i++ )
//  document.write ( i + " " + arrText[ i ] + "," + arrValue[ i ] + "<br />" );
}
var arrText = new Array();
var arrValue = new Array();

var sInputFile = "c:\\myscripts\\data.txt";
var fso = new ActiveXObject( "Scripting.FileSystemObject" );
read_data( sInputFile );
drawGraphVert( arrText, arrValue, 200, 0, 60 );
drawGraphHoriz( arrText, arrValue, 600, 0 );

</script>

 

 


  
  

EMF431-18 17.12.2007 02:15
http://www.myspace.com/serpeninov
  
  

gliba 31.12.2006 21:21
Не Cool! прямоугольники отображаются одинаковыми. Беда! Сразу не заметил. Это в FireFox'е. Как писал один юзер, "замени span на div и будет тебе щастье". Заменил. Работает.
  
  

filolog 25.12.2006 19:48
надо отлаживать от лажи....
  
  

v10190 25.12.2006 15:31
Не Cool! прямоугольники отображаются одинаковыми.
  
  

yura 24.12.2006 01:31
Cool!
  
  

gliba 24.12.2006 00:26
Примеры
Ниже приведен 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>

  
  

gliba 23.12.2006 23:41

<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><div style='background-color:" + arrCol8[ j ] + 
			"; width:" + iWidthSpan + "'> " + arrValue[ i ] + "</div></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'><div style='background-color:" + arrCol8[ j ] + 
			"; width:30px; height:" + iHeightSpan + "px'> " + arrValue[ i ] + "</div></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>

  
  

gliba 23.12.2006 23:41
Немного комментариев.
Для хранения цветов используется массив arrCol8. "На вкус и на цвет товарищей нет". Меняйте на здоровье.
Значения аргументов функции drawGraphHoriz( arrText, arrValue, width, border ):
  • arrText - массив названий,
  • arrValue - массив числовых значений,
  • width - ширина гистограмм,
  • border - ширина бордюра ячеек таблицы.

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

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



    Новое сообщение
     

    Послать уведомление по e-mail

    Продолжить


    Авторизоваться через https://www.pvobr.ru
    Логин
    Пароль
    Регистрация

    Авторизоваться через соцсети
    Наверх