Сьогодні я продовжу розповідь про створення та використання графіків на web ресурсах.
У попередніх статтях йшлося про використання для цих цілей flash бібліотек ( Графіки своїми руками - Open Flash Chart 2 ) І зовнішніх сервісів ( Графіки від Google і PHP бібліотеки для роботи з ними ).
В принципі, на цьому можна було б зупинитися, але судячи з реакції в коментарях, я пропустив ще один дуже цікавий варіант створення графіків. Мова, звичайно, про використання JavaScript .
Розглянемо переваги і недоліки цього варіанту.
Переваги.
1) Мінімальні витрати на трафік. Передати потрібно тільки саму бібліотеку (зазвичай розмір не перевищує 100 кБ (без стиснення)) і дані для побудови графіка.
2) Мінімальне навантаження на сервер. Отрісовка графіка виконується браузером. Сервер повинен тільки відправити масив з точками, за якими буде побудований графік.
3) Простота використання. Досягається за рахунок готових бібліотек.
Недоліки.
1) Можливі проблеми сумісності з деякими браузерами. З цими проблемами знайомі всі web майстра. Але, мушу зазначити, що розробники бібліотек непогано з ними справляються.
2) Додаткове навантаження на комп'ютер користувача. Досить спірний момент. Навряд чи звичайний користувач помітить час, за яке буде створено один простий графік. Але якщо графіків десятки і для їх створення використовуються тисячі точок, то час створення такої сторінки може суттєво зрости. Загалом, тут багато що залежить від вас.
Тепер перейдемо до практичної частини.
На сьогоднішній день JavaScript бібліотек для створення графіків досить багато. Але принципи їх використання практично однакові, тому приклад приведу я тільки для однієї.
бібліотека називається Flot .
Для початку визначимося з завданням.
Припустимо, у нас є PHP скрипт, який отримує дані, які потрібно показати на графіку. І HTML сторінка на якій ми повинні розмістити графік.
Почнемо з розмітки сторінки.
<? Xml version = "1.0" encoding = "UTF-8"?> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/ xhtml1 / DTD / xhtml1-strict.dtd "> <html xmlns =" http://www.w3.org/1999/xhtml "xml: lang =" en "lang =" en "> <head> <title> Тестування бібліотеки Flot </ title> <meta http-equiv = "content-type" content = "text / html; charset = utf-8" /> <meta http-equiv = "Content-Style-Type" content = "text / css "/> <meta name =" description "content =" Використання бібліотеки Flot "/> <meta name =" keywords "content =" flot, javascript, графік "/> </ head> <body> <div id =" my_graph "style =" width: 500px; height: 300px "> </ div> <! - end of my_graph -> <p> Детальний опис цього прикладу в статті <a href=""> </a>. </ P> <script type = "text / javascript" src = "jquery.js"> </ script> <script type = "text / javascript" src = "jquery.flot.js"> </ script> <! - [if IE]> <script type = "text / javascript" src = "excanvas.js"> </ script> <! [endif] -> <script type = "text / javascript" src = "main. js "> </ script> </ body> </ html>Як бачите, це звичайна сторінка, всередині якої знаходиться блок div, призначений для розміщення нашого графіка (рядки 18-19). В CSS стилях цього блоку потрібно обов'язково вказати його розміри (width, height).
Крім того, в кінці сторінки ми підключили файли бібліотеки (рядки 25-27).
Оскільки бібліотека Flot (jquery.flot.js) є плагіном до jQuery , То першою ми підключаємо її. Третій файл (excanvas.js) потрібен для підтримки IE6.
У рядку 30 ми підключаємо JavaScript файл (main.js), який буде отримувати дані від сервера і малювати графік.
Розглянемо його докладніше.
$ (Function () {// отримуємо дані для графіка (за допомогою AJAX запиту) $ .get (document.location.href + "datasrc.php", null, function (data) {// будуємо графік var graphData = eval ( "(" + data + ")"); $ .plot ($ ( "# my_graph"), graphData, {yaxis: {max: 6, min: -6}});});});Як бачите, тут все гранично просто.
1) Отримуємо дані (за допомогою Ajax запиту).
2) Для передачі даних я вибрав JSON формат, тому що він дозволяють максимально спростити скрипти.
3) Будуємо графік за допомогою функції plot. В її першому параметрі передаємо id блоку, в якому буде розміщений графік. У другому - дані, отримані від серверного скрипта. У третьому - налаштування графіка (я вказав тільки мінімальне і максимальне значення по вертикальній осі).
Тепер переходимо до сервреной частини.
<? Php // Тут може бути код для отримання даних з бази даних // У цьому прикладі ми створимо звичайний масив з координатами точок $ points1 = array (array (0,1), array (1,3), array (2, -4), array (3,2), array (4,0.5), array (5,0.7), array (6, -1), array (7,4), array (8,2)); $ Points2 = array (array (0, -1), array (1, -3), array (2,4), array (3, -2), array (4, -0.5), array (5, -0.7 ), array (6,1), array (7, -4), array (8, -2)); // масив з настройками графіка $ graph = array (array ( 'color' => 'rgb (255, 98, 0)', 'data' => $ points1, 'label' => 'Лінія 1'), array ( 'color' => 'rgb (18, 143, 52)', 'data' => $ points2, 'label' => 'Лінія 2')); echo json_encode ($ graph); // end of datasrc.phpЦей скрипт просто створює масив з даними графіка, перетворює в JSON формат і відправляє браузеру.
Зверніть увагу на запис даних в масив. Масив $ graph містить 2 вкладених масиву, кожен з яких в свою чергу містить всі дані, необхідні для створення однієї лінії на графіку. Перш за все, це координати точок (елемент data), колір лінії (color), підпис (label).
Взагалі-то існує десяток інших параметрів. Але щоб спростити приклад я їх пропустив. Детальніше почитати про використання цієї бібліотеки ви завжди зможете в документації.
Live Demo
Подивитися, як виглядає цей графік можна тут .
завантажити
Крім того, якщо є бажання поекспериментувати ви можете скачати архів з прикладом .
На закінчення наведу невеликий список JavaScript бібліотек для створення графіків.
JS charts
jqplot
PlotKit
JavaScript Graph Builder
Rapha? L
jQuery Sparklines
Невелике доповнення.
У стислому варіанті використовуються тут JavaScript бібліотеки досить об'ємні. Тому я упакував їх архиватором 7-zip і додав в папку з цим прикладом .htaccess з таким вмістом.
<IfModule mod_rewrite.c> RewriteEngine On AddEncoding gzip .gz RewriteCond% {HTTP: Accept-encoding} gzip RewriteCond% {REQUEST_FILENAME} .gz -f RewriteRule ^ (. *) $ $ 1.gz [QSA, L] </ IfModule>Тепер відвідувачеві буде відправлятися заархівований варіант бібліотеки.
Детальніше почитати про принцип роботи .htaccess можна в статті Збільшуємо швидкість завантаження web сторінок .
Як завжди, буду радий почути вашу думку в коментарях 😉
Lt;?Quot; encoding = "UTF-8"?
Lt;?