Блоґ одного кібера

Історія хвороби контуженого інформаційним вибухом

Як намалювати графік на веб-сторінці

leave a comment »

Інколи потрібно розмістити на веб-сторінці якийсь графік. Зазвичай найпростіше це зробити за допомогою картинки. Але, в тому випадку, якщо ми хочемо унаочнити якусь динамічну інформацію, наприклад температуру повітря, чи статистику відвідувань, потрібно використати щось інтерактивніше.
Якщо припустити, що сторінка генерується за допомогою PHP, то можна обрати кілька рішень.

  1. Використати графічні можливості PHP.
    Зазвичай використовується при створенні капчі. Сам поки що не користувався. Єдиний мінус, який я знаю — те що картинка є картинкою, і тому важка для передачі. Хоча, при сучасних лініях …
  2. За допомогою чистого HTML.
    Правда таким чином можна зробити тільки стовпчикову гістограму. Беремо якусь картинку 2 на 2 пікселі, потрібного нам кольору. І зі скрипта PHP виводимо: <img src="..." width="..." height="висота_нашого_стовпчика"/>. Ось так. Тільки такий спосіб доволі незвичний. Таке я бачив тільки в одній онлайн-грі, де таким чином показували залишок здоров’я.
  3. За допомогою Flash.
    Так можна добитися дуже хорошої графіки, і анімації. На Flashі працюють діаграмки Wordpres — CMSки оцього от сайту. Правда як це зробити — шукайте тут.
  4. За допомогою JavaScript.
    От як це зробити, я вам зараз і розкажу…

Намагаючись вирішити вищеописану проблему, я наткнувся на один сайтик, де розміщено безплатну графічну бібліотеку для JavaScript – Рафаель. І з її допомогою задачка розв’язується.

Перше що потрібно зробити — підключити бібліотеку рядком:

<script src="raphael0.js" type="text/javascript" charset="utf-8"></script>

Далі, потрібно визначитись, а де саме будем малювати? Є два варіанти — прямо в вікні, або в якомусь елементі HTML. В обох випадках створюється щось на зразок канви (полотна для малювання). В першому випадку в функцію створення канви передається чотири координати області малювання (всі координати в пікселях), а в іншому — ідентифікатор елемента, і його розміри. Наприклад:

var canvas = Raphael("diagram",300,200); //Для конкретного id
var canvas = Raphael(100,100,400,300); //Для всього вікна

Варто також зауважити, що якщо ми описуємо скрипт до того, як завантажиться елемент, по якому він буде малювати, то дістанемо фігу. Тому, варто починати малювання, вже після завантаження сторінки. Для цього просто пишіть код в функції, яку присвойте події window.onload . Тепер, коли, всі приготування до малювання відбулися, можна робити пробу пензля.

	var c=canvas.circle(100,100,100); //Ану здогадайтеся, що я хотів намалювати?

Якщо при завантаженні сторінки ви десь побачили коло, значить запрацювало. Якщо ж ні — треба шукати помилку :(. Обережно, JavaScript чутливий до регістру.

Тепер, спробуймо намалювати щось більш схоже на графік. Для початку — задамо інформацію, яку будемо виводити. Думаю, найзручніше це робити масивом:

	var f=Array(11,100,120,70,150,39,45,120,173,13,140,123);

Далі — створюємо об’єкт лінії.

	var ln=r.path({stroke:"#040"});

Поясню, що за дивні параметри в функції. Об’єкти, які ви малюєте, мають атрибути, такі як розміри, координати, кольори, і тому подібне. От, ці атрибути можна задавати за допомогою методу attr двома способами: attr("fill","#000"), і attr({fill:"#000"}). В обох прикладах, ви бачили як змінювати колір заливки об’єкту на чорний. Параметр stroke задає колір рисок. Загалом все віддалено нагадує Windows GDI.

Далі задаємо початкову позицію пера, за допомогою методу moveTo(x,y). І малюємо лінії методом lineTo(x,y). Для любителів чогось на зразок LineRel(x,y) — можна включити опцію, коли всі координати будуть відносні. Для цього викликаємо метод relatively(). Приклад:

	var c = paper.path({stroke: "#036"}).relatively().moveTo(10, 10).lineTo(50, 50);
От такий графік вийшов в мене.

От такий графік вийшов в мене.

В принципі, цього має вистачити, щоб намалювати графік. Що вийшло в мене — дивіться на картинці, і код нижче. Хочете знати більше — читайте документацію. Якщо не зрозуміло — питайте в коментарях, відповім.

<!-- Прошу вибачення за негарний заголовок, але WordPress, трохи неадекватно
 сприймає тег  <html>, тому буде такий.-->
<html>
<head>
<title>Graphics</title>
<script src="raphael0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
	window.onload = function()
	{
		var r = Raphael("picture",300,200);		
		var f=Array(11,100,120,70,150,39,45,120,173,13,140,123);
		function line(x1,y1,x2,y2)
		{
			var ln=r.path({stroke:"#040"}).moveTo(x1,y1).lineTo(x2,y2);
		}
		for(i=30;i<300;i+=30) line(i,0,i,200);
		for(i=10;i<200;i+=10) line(0,i,300,i);
		var curve=r.path({stroke:"#000"}).moveTo(0,f[0]);
		for(i=0;i<=10;i++) 
		{
			curve.lineTo(i*30,f[i]);
			var c= r.circle(i*30,f[i],3).attr({stroke:"#00f", fill:"#00f"});
		}
		curve.attr("stroke","#f00");
	};
</script>
</head>
<body bgcolor="#000f00">
<table  align="center" height="100%">
<tr><td>
	<table border="1">
	<tr><td id="picture" width="300" height="200" bgcolor="#000000"></td></tr>
	</table>
</td></tr>
</table>
</body>
</html>
Advertisements

Written by bunyk

Березень 26, 2009 at 00:05

Оприлюднено в Кодерство, Павутина

Tagged with ,

Залишити відповідь

Заповніть поля нижче або авторизуйтесь клікнувши по іконці

Лого WordPress.com

Ви коментуєте, використовуючи свій обліковий запис WordPress.com. Log Out / Змінити )

Twitter picture

Ви коментуєте, використовуючи свій обліковий запис Twitter. Log Out / Змінити )

Facebook photo

Ви коментуєте, використовуючи свій обліковий запис Facebook. Log Out / Змінити )

Google+ photo

Ви коментуєте, використовуючи свій обліковий запис Google+. Log Out / Змінити )

З’єднання з %s

%d блогерам подобається це: