На главную

Библиотека Интернет Индустрии I2R.ru

Rambler's Top100

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Забобрить эту страницу! Забобрить! Блог Библиотека Сайтостроительства на toodoo
  Поиск:   
Рассылки для занятых...»
I2R » Сайтостроительство » Web-дизайн

Создание круговой диаграммы с помощью модуля GD::Graph

"Drawing a pie chart with GD::Graph::pie". Jonathan Eisenzopf - Web Developers Virtual Library

Сейчас, чтобы удовлетворить нужды прихотливых пользователей, практически каждый Интернет-ресурс строится на динамическом отображении представленной информации. Сегодня мы рассмотрим лишь одну из таких возможностей, а именно – реализацию динамических круговых диаграмм.

Язык программирования Perl предлагает разработчикам обширный инструментарий для создания, обработки, изменения и управления содержимым веб-сайтов. С помощью Perl-модуля GD::Graph создание круговой диаграммы становится делом простым и доступным практически каждому.

Пример круговой диаграммы

К примеру, ваш начальник хочет получить сравнительный график, отображающий динамику продаж в онлайне, в обычных магазинах и посредством дистрибьюторов. Сам график должен строиться на основе CSV-файла (Comma Separated Values), который еженедельно экспортируется из Microsoft Excel и размещается в отдельной директории в локальной сети. Нам необходимо написать скрипт, автоматически генерирующий круговую диаграмму на основе имеющихся CSV-данных.

Листинг 1

1  use strict;
2  use GD::Graph::pie;
3  use Text::CSV_XS;
4
5  my @data;
6
7  my $csv = new Text::CSV_XS;
8  open(FILE,"excel.csv") || die "Cannot open excel.csv: $!\n";
9  while (my $line = <FILE>) {
10      $csv->parse($line);
11      my @col = $csv->fields;
12      push(@data,\@col);
13  }
14
15  my $graph = new GD::Graph::pie(300, 300);
16
17  $graph->set(
18      title  =>  'Заголовок круговой диаграммы',
19      label  =>  'Пояснительная подпись',
20      axislabelclr  =>  'black',
21      '3d'  =>  1,
22      start_angle  =>  90,
23      suppress_angle  =>  5,
24  )
25  or warn $graph->error;
26
27  $graph->set_title_font("/usr/share/fonts/ttf/windows/times.ttf",18);
28  $graph->set_value_font("/usr/share/fonts/ttf/windows/times.ttf",12);
29  $graph->set_label_font("/usr/share/fonts/ttf/windows/times.ttf",14);
30
31  $graph->plot(\@data) or die $graph->error;
32
33  open(GRAPH,">graph.jpg") || die "Cannot open graph.jpg: $!\n";
34  print GRAPH $graph->gd->jpeg(100);

В строке 3 приведенного листинга мы загружаем модуль Text::CSV_XS, скачать бесплатную версию которого можно на CPAN (Comprehensive Perl Archive Network). В строке 7 создаем новый объект класса Text::CSV_XS, открываем CSV-файл в строке 8 и считываем данные из файла в массив @data (строки 9-13). Строка 10 вызывает метод parse(), который разбивает строки файла по колонкам. Сформированные колонки возвращаются с помощью метода fields() в строке 11 и добавляются в виде ряда в массив @data (строка 12). Другими словами, вместо формирования массива @data вручную, мы можем создать его из внешнего файла (в данном случае - CSV).

Далее (в строке 15) создаем объект диаграммы нужной разновидности (в данном случае - pie) с заданным размером изображения.

Третий параметр в строке 21 равен 1, что подразумевает создание трехмерной круговой диаграммы (значение "0" выводит двумерный график и используется по умолчанию). Далее необходимо определить начальную точку построения диаграммы, с которой скрипт будет начинать отсчет секторов графика. Значение задается в градусах и по умолчанию равно "0" (мы установили значение "90", строка 22). Также мы можем установить нужное значение параметра suppress_angle, который определяет минимальный размер сектора круговой диаграммы в градусах.

При желании можно использовать шрифты TrueType вместо встроенных. В строках 27-29 указываются названия гарнитур, использующихся, соответственно, для заголовка диаграммы, наименования секторов и пояснительных подписей к графику. Цифры, идущие после указания гарнитур, означают установленный размер шрифта.

В строке 33 выводится изображение круговой диаграммы в файл в формате JPEG (или PNG). В следующей строке параметром метода jpeg() можно задать степень оптимизации (качества) изображения (в процентах).

В данном случае изображение диаграммы выводится в файл в графическом формате, однако можно его вывести в стандартный поток вывода STDOUT. Это может потребоваться для создания "налету" диаграмм отображения динамически изменяющихся данных на веб-странице. Для этого придется несколько видоизменить вышеприведенный код программы.

Листинг 2

32  print "Content-type: image/jpeg\n\n";
33  binmode(STDOUT);
34  print $graph->gd->jpeg(100);

Чтобы вывести круговую диаграмму на веб-странице, в нужном месте документа следует вставить следующую HTML-конструкцию:

Листинг 3

<img src="/cgi-bin/graph.cgi" width="300" height="300" border="0" alt="Диаграмма">

Перевод и дополнения к листингам
составлены совместно с Алексеем Репьевым.

Алексей Петюшкин
Источник: alpet.spb.ru - Статьи по Интернет-технологиям

Рассылки Subscribe.ru:

Библиотека сайтостроительства - новости, статьи, обзоры
Дискуссионный лист для web-разработчиков
Подписка на MailList.Ru
Автор: NunDesign
Другие разделы
Оптимизация сайтов
Web-студии
» Новое в разделе
Web-дизайн
Web-программирование
Интернет-реклама
Раскрутка сайта
Web-графика
Flash
Adobe Photoshop
Рассылка
Инструменты вебмастера
Контент для сайта
HTML/DHTML
Управление web-проектами
CSS
I2R-Журналы
I2R Business
I2R Web Creation
I2R Computer
рассылки библиотеки +
И2Р Программы
Всё о Windows
Программирование
Софт
Мир Linux
Галерея Попова
Каталог I2R
Партнеры
Amicus Studio
NunDesign
Горящие путевки, идеи путешествийMegaTIS.Ru

2000-2008 г.   
Все авторские права соблюдены.
Rambler's Top100