JavaScript библиотеки для создания графиков. Статьи. wb0.ru - Все для веб-мастера, on-line сервисы

JavaScript библиотеки для создания графиков

Рассмотрим достоинства и недостатки создания графиков с использованием JavaScript.

Достоинства:

  1. Минимальные затраты на трафик. Передать нужно только саму библиотеку (обычно размер не превышает 100 кБ (без сжатия)) и данные для построения графика.
  2. Минимальная нагрузка на сервер. Отрисовка графика выполняется браузером. Сервер должен только отправить массив с точками, по которым будет построен график.
  3. Простота использования. Достигается за счет готовых библиотек.
Недостатки.
  1. Возможны проблемы совместимости с некоторыми браузерами. С этими проблемами знакомы все web мастера. Но, должен отметить, что разработчики библиотек неплохо с ними справляются.
  2. Дополнительная нагрузка на компьютер пользователя. Достаточно спорный момент. Вряд ли обычный пользователь заметит время, за которое будет создан один простой график. Но если графиков десятки и для их создания используются тысячи точек, то время создания такой страницы может существенно возрасти. В общем, тут многое зависит от вас.
Теперь перейдем к практической части. На сегодняшний день JavaScript библиотек для создания графиков довольно много. Но принципы их использования практически одинаковые, поэтому пример приведу я только для одной.

Библиотека называется Flot.

Для начала определимся с задачей. Допустим, у нас есть PHP скрипт, который получает данные, которые нужно показать на графике. И HTML страница на которой мы должны разместить график.

Начнем с разметки страницы.

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5.  
  6. <head>
  7.     <title>Тестирование библиотеки Flot</title>
  8.    
  9.     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  10.     <meta http-equiv="Content-Style-Type" content="text/css" />
  11.    
  12.     <meta name="description" content="Использование библиотеки Flot" />
  13.     <meta name="keywords" content="flot, javascript, график" />
  14. </head>
  15.  
  16. <body>
  17.  
  18. <div id="my_graph" style="width:500px; height:300px">
  19. </div><!- end of my_graph ->
  20.  
  21. <p>
  22.     Подробное описание этого примера в статье <a href=""></a>.
  23. </p>
  24.  
  25. <script type="text/javascript" src="jquery.js"></script>
  26. <script type="text/javascript" src="jquery.flot.js"></script>
  27. <!-[if IE]>
  28. <script type="text/javascript" src="excanvas.js"></script>
  29. <![endif]->
  30. <script type="text/javascript" src="main.js"></script>
  31. </body>
  32. </html>

Как видите, это обычная страница, внутри которой находится блок div, предназначенный для размещения нашего графика (строки 18-19). В CSS стилях этого блока нужно обязательно указать его размеры (width, height).

Кроме того, в конце страницы мы подключили файлы библиотеки (строки 25-27).

Т.к. библиотека Flot (jquery.flot.js) является плагином к jQuery, то первой мы подключаем её. Третий файл (excanvas.js) нужен для поддержки IE6.

В строке 30 мы подключаем JavaScript файл (main.js), который будет получать данные от сервера и рисовать график.

Рассмотрим его подробнее.

  1. $(function() {
  2.     //получаем данные для графика (с помощью AJAX запроса)
  3.     //$.get(document.location.href + "datasrc.php", null, function(data) {
  4.     $.get("datasrc.php", null, function(data) {
  5.         //строим график
  6.         var graphData = eval("(" + data + ")");
  7.         $.plot($("#my_graph"), graphData, { yaxis: {max: 6, min: -6} });
  8.     });
  9. });

Как видите, тут все предельно просто.

  1. Получаем данные (с помощью Ajax запроса).
  2. Для передачи данных я выбрал JSON формат, т.к. он позволяют максимально упростить скрипты.
  3. Строим график с помощью функции plot. В её первом параметре передаём id блока, в котором будет размещен график. Во втором - данные, полученные от серверного скрипта. В третьем - настройки графика (я указал только минимальное и максимальное значение по вертикальной оси).
Теперь переходим к серверной части.

  1. <?php
  2.  
  3. //Тут может быть код для получения данных из базы данных
  4. //В этом примере мы создадим обычный массив с координатами точек
  5.  
  6. $points1 = array(
  7.     array(0,1)
  8.     , array(1,3)
  9.     , array(2,-4)
  10.     , array(3,2)
  11.     , array(4,0.5)
  12.     , array(5,0.7)
  13.     , array(6,-1)
  14.     , array(7,4)
  15.     , array(8,2)
  16. );
  17.  
  18. $points2 = array(
  19.     array(0,-1)
  20.     , array(1,-3)
  21.     , array(2,4)
  22.     , array(3,-2)
  23.     , array(4,-0.5)
  24.     , array(5,-0.7)
  25.     , array(6,1)
  26.     , array(7,-4)
  27.     , array(8,-2)
  28. );
  29.  
  30. //массив с настройками графика
  31. $graph = array(
  32.     array(
  33.         'color'=>'rgb(255, 98, 0)'
  34.         , 'data'=>$points1
  35.         , 'label'=>'Линия 1'
  36.     )
  37.     , array(
  38.         'color'=>'rgb(18, 143, 52)'
  39.         , 'data'=>$points2
  40.         , 'label'=>'Линия 2'
  41.     )
  42. );
  43.  
  44. echo json_encode($graph);
  45.  
  46. // end of datasrc.php

Этот скрипт просто создает массив с данными графика, преобразует в JSON формат и отправляет браузеру.

Обратите внимание на запись данных в массив. Массив $graph содержит 2 вложенных массива, каждый из которых в свою очередь содержит все данные, необходимые для создания одной линии на графике. Прежде всего, это координаты точек (элемент data), цвет линии (color), подпись (label).

Вообще-то существует десяток других параметров. Но чтобы упростить пример я их пропустил. Подробнее почитать об использовании этой библиотеки вы всегда сможете в документации.

Этот график выглядит так:

Кроме того, если есть желание поэкспериментировать, вы можете скачать архив с примером.

Список JavaScript библиотек для создания графиков:

Небольшое дополнение.

В несжатом варианте используемые здесь JavaScript библиотеки довольно объемные. Поэтому я упаковал их архиватором 7-zip и добавил в папку с этим примером .htaccess с таким содержимым.

  1. <IfModule mod_rewrite.c>
  2.     RewriteEngine On
  3.     AddEncoding gzip .gz
  4.     RewriteCond %{HTTP:Accept-encoding} gzip
  5.     RewriteCond %{REQUEST_FILENAME}.gz -f
  6.     RewriteRule ^(.*)$ $1.gz [QSA,L]
  7. </IfModule>

Теперь посетителю будет отправляться заархивированный вариант библиотеки.


Дата публикации: 12.09.2010
simplecoding.org

Статьи по теме:

   Ваш псевдоним:
Ваш комментарий:

Новости Интернет


Поиск




Наши партнеры




Последний пересчет

тИЦ:07 Окт 15
PR:09 Дек 13

Посетители

On-Line:19
Рекорд:1794
Зафиксирован:01 Окт 13

Наши партнеры

wservices.ru - регистрация доменов, Whois-сервисы Смайлы на все случаи жизни


Календарь событий


 
Copyright © 2006-2017, wb0.ru