Графики html – Графика в HTML5

Графика Использование графики в html

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

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

• логотип компании на деловой странице;

• графика для рекламного объявления;

• различные рисунки;

• диаграммы и графики;

• художественные шрифты;

• подпись автора страницы;

• применение графической строки в качестве горизонтальной разделительной линии;

• применение графических маркеров для создания красивых маркированных списков.

Теперь рассмотрим как вставить изображение в Web-страницу. Тегом HTML, который заставляет браузер выводить изображение, является <IMG> с обязательным атрибутом SRC (SouRCe, источник). Имя файла представляет собой имя выводимого графического файла. Замыкающего тега не требуется.

Пример вставки изображения:

<IMG SRC=»image.gif» ALT=»ИЗОБРАЖЕНИЯ»>

Изображения на Web-странице могут использоваться в качестве гипертекстовых ссылок, как и обычный текст. Читатель щелкает на изображении и отправляется на другую страницу или переходит к другому изображению. Для обозначения изображения как гипертекстовой метки используется тот же тег <A>, что и для текста, но между <A> и </A> вставляется тег изображения <IMG> :

<A HREF=»адрес файла или изображения»> <IMG SRC=»image.gif»></A>

При этом изображение, используемое в качестве гипертекстовой ссылки, обводится дополнительной рамкой.

Атрибуты и их аргументы

Тег изображения имеет один обязательный атрибут SRC и необязательные: ALT, ALIGN, USEMAP, HSPACE, VSPACE, BORDER, WIDTH, HEIGHT.

Атрибут src

Указывает файл изображения и путь к нему; изображение должно быть загружено в браузер и размещено в том месте документа, где расположен тег изображения.

Атрибут alt

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

Атрибут аlign

Определяет положение изображения относительно окружающего его текста. Возможные значения аргумента — [«top» | «middle» | «bottom»] (соответственно, «вверху», «посередине», «внизу»).

ALIGN=»top»выравнивает верх изображения по верхнему краю самого высокого элемента в строке окружающего текста.

ALIGN=»middle»выравнивает центр изображения по базовой линии строки окружающего текста.

ALIGN=»bottom»выравнивает нижний край изображения по базовой линии строки окружающего текста.

Кроме основных значений атрибута ALIGN=»ключевое слово» существует еще ряд аргументов, которые расширяют возможности взаимного размещения графики и текста. Рассмотрим их подробнее.

Дополнительные возможные значения аргумента — [«left» | «right» | «top» | «texttop» | «middle» |»absmiddle» | «baseline» | «bottom» | «absbottom» ].

ALIGN=»left»определяет огибаемое текстом изображение. Изображение располагается вдоль левой границы документа, а последующие строки текста огибают его справа.

ALIGN=»right»определяет огибаемое текстом изображение. Изображение располагается вдоль правой границы документа, а последующие строки текста огибают его слева.

ALIGN=»top»выравнивает верх изображения по верхнему краю самого высокого элемента в строке окружающего текста точно так же, как при использовании стандартного набора атрибутов.

ALIGN=»texttop»выравнивает верх изображения по верхнему краю самого высокого текстового символа в строке окружающего текста. Действие этого аргумента в большинстве случаев, но не всегда, подобно действию аргумента ALIGN=»top».

ALIGN=»middle»выравнивает центр изображения по базовой линии строки окружающего текста точно так же, как при использовании стандартного набора атрибутов.

ALIGN=»absmiddle»выравнивает центр изображения по центру строки окружающего текста.

ALIGN=»baseline»выравнивает нижний край изображения по базовой линии строки окружающего текста, то есть производит такое же действие, как и ALIGN=»bottom».

ALIGN=»bottom»выравнивает нижний край изображения по базовой линии строки окружающего текста точно так же, как при использовании стандартного набора атрибутов.

ALIGN=»absbottom»выравнивает нижний край изображения по нижнему краю строки окружающего текста.

studfile.net

Графика в HTML

«Графика в HTML» – шестой урок учебника HTML. В этом уроке речь пойдет о работе с веб графикой, как частью HTML страниц. Мы научимся создавать изображения в рамках HTML и настраивать их отображение.

Работа с изображениями и графикой в HTML очень важна, именно она позволяет сделать внешний вид страницы таким, каким мы его и хотим видеть, создание фона, добавление графических объектов и многое другое будет рассмотрено в этом разделе.

Использование графики на HTML страницах.

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

Но не стоит забывать, что графика должна гармонично сочетаться с общим настроением сайта. Она не должна резко выделяться, а лишь немного подчеркивать тематику сайта. Нельзя использовать яркие, кислотные цвета, резко контрастирующие с цветом текста, нельзя использовать фоновые цвета, близкие к цвету текста, нельзя перегружать страницу большим количеством анимации — все это отпугивает пользователя и сильно увеличивает время загрузки страницы.

Простота — есть гениальность.

Придерживайтесь этого правила и ваши страницы будут притягивать внимание.

Но простота и примитивность – совершенно разные понятия. Найдите баланс. Экспериментируйте для получения своей, уникальной формулы дизайнерского успеха…

Добавление изображений к html странице.

Для добавления к web–странице файла с изображением используется тег <img>, с обязательным атрибутом src, который будет указывать на файл с изображением.

<p><center><img src=»../img/cat.gif» alt=»Это кот «></center></p>

Форматирование изображений.

Для форматирования текста, расположенного рядом с изображением используется атрибут тега <img> – allign. Пример его работы вы можете видеть ниже:

Для дополнительного форматирования изображений могут быть использованы атрибуты hspace и vspace, которые определяют интервал между графическим изображением и расположенным возле текстом по горизонтали и вертикали. Величина отступа задается в пикселях. В примере сверху вы можете видеть влияние этих атрибутов на форматирование.

Также форматировать изображение можно посредством атрибута border, задающего ширину рамки вокруг изображения. По умолчанию рамка вокруг изображения равна 0, а вокруг изображения, являющегося ссылкой – 2.

Аттрибуты height и width позволяют задать размер изображения по ширине и высоте. Задать размер можно как в пиксельной, так и в процентной величине. По умолчанию браузер устанавливает изображению его реальные размеры, но я вам настоятельно рекомендую всегда использовать эти атрибуты и задавать размер изображения вручную. Связанно это с тем, что при невозможности загрузить изображения браузер установит ему случайные размеры и получится пустой квадрат со случайным размером, который почти наверняка искаверкает общий каркас сайта, что приведет к неправильному отображению последнего. Если же атрибуты размера установлены, то даже при невозможности загрузки изображения каркас сайта не будет нарушен.

Атрибут ALT – указывает название изображения, которое учитывается поисковыми машинами при индексации сайта и отображается в пустом квадрате вместо изображения, в случае невозможности загрузки последнего. Использование этого атрибута я считаю обязательным, но об этом мы поговорим в разделе «Как раскрутить сайт самостоятельно и с нуля ».

Использование фона в HTML.

Одним из наиболее важных факторов графического оформления сайта является использование фона. Для создания фона, состоящего из одного сплошного цвета используется атрибут bgcolor со значением цвета. Для использования изображения в качестве фона используется атрибут background с адресом фонового рисунка. Особенностью тега backgroundявляется то что он при открытии изображения помещает его в полном размере в левый верхний угол экрана и начинает его тиражировать на весь экран, что позволяет добиваться довольно интересных эффектов. Например:

Я текст на красном фоне

<body bgcolor=»red»>
<p align=»center»>
я текст на красном фоне
</p>
</body>

Я текст на фоне маленького кота

<body background=
«../img/cat_mini.gif»>
<p align=»center»>
я текст на фоне маленького кота
</p></body>

я текст на фоне кота побольше

<body background=
«../img/cat.gif»>
<p align=»center»>
я текст на фоне кота побольше
</p></body>

Из примеров хорошо видно, как браузер тиражирует изображение.

Горизонтальная линия.

Для построения горизонтальной линии используется тег <hr>. Для изменения параметров линии, а именно, толщины и длинны, используются атрибуты SIZE и WIDTH. Для выравнивания линии, относительно центра страницы используется атрибут ALIGN. Атрибут NOSHADE используется для определения, будет ли у линии тень.

<hr align=»center» color=»#666666″ width=»400″>

---

Правильное использование графики на веб-страницах способствует созданию необходимой атмосферы на сайте. Цветовые и графические схемы необходимо подбирать в зависимости от ситуации и от нацеленности всего проекта. Например на информационных сайтах, содержащих преимущественно текстовую информацию отлично работают теплые тона, с небольшим контрастом между областью с содержанием текста и остальной областью сайта, на продающих сайтах отлично работают светлые схемы оформления с элементами высокой контрастности (красный и синий). Вообще правильный выбор дизайна сайта – это отдельная и очень объемная тема, которая с легкостью может занять целую книгу.

---

Графическое оформление позволит сделать ваш сайт уникальным и привлекательным. При создании графики внутри HTML страниц немаловажно проводить оптимизацию изображений для уменьшения их веса, а соответственно и скорости загрузки картинок. Для небольших изображений рекомендую использовать формат .gif, для крупных — .jpeg со средними настройками качества. .png изображения являются одними из наиболее увесистых, поэтому рекомендую по возможности отказаться от их использования.

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

www.eltisbook.ru

Графика в HTML5 | Учебник HTML5

Теперь попробуем осуществить давнюю мечту — изобразить на веб-странице наклонную линию (раньше для этого нужно было применять Flash или, прости Господи, ActiveX). Тут нам потребуется по-настоящему рисовать:

Читать далее →

Для избавления программиста от мучений, связанных с копированием собственного кода при отображении повторяющихся элементов, существует специальный тег, к которому мы уже обращались, — <use>. Читать далее →

По задумке художника, который пытается во мне проснуться, это будет основание для некой фигуры, и, как и положено основанию, оно должно лежать на полу (сейчас фигура стоит на ребре). Читать далее →

Наклонные линии, симпатичные рожи и сердечки — это, конечно, хорошо, но работа с графикой никогда не стала бы полноценной без возможности импорта готовых изображений. Естественно, такая возможность в canvasAPI присутствует, и сейчас мы научимся ее использовать.

Читать далее →

Анимация в SVG осуществляется средствами языка SMIL. Это язык разметки, рекомендованный W3C для описания мультимедийных презентаций. И тут все гораздо интереснее, чем, допустим, в Canvas или в WebGL (где анимация — покадровая), хотя подход довольно необычный: в SVG каждой отдельной геометрической фигуре можно присвоить свои анимационные инструкции, заставить двигаться. Как и SVG, SMIL является простым подмножеством XML.

Читать далее →

Ну хватит мучить кошек. Но, не отходя далеко от операций с готовыми изображениями, стоит рассмотреть, как canvas может работать с рисунком попиксельно. За это отвечают два метода — getImageData() и putImageData(). Сначала посмотрим, как они работают на практике. Следующим кодом мы обесцветим цветную фотографию (рис. 46):

Читать далее →

Естественно, создавать реальные, сложные приложения с использованием SVG — значит обрекать себя на написание большого количества повторяющегося, однообразного и рутинного кода. Читать далее →

Мы уже применяли в силу необходимости метод translate(), теперь давайте разберемся с некоторыми трансформациями изображений подробнее.

Упомянутый метод просто сдвигает пространство рисования на заданное значение по двум координатам:

Читать далее →

Итак, вопрос, который по определению провокационный и флеймообразующий: что использовать — canvas или SVG, — на первый взгляд, он не очень правомерен: SVG — это векторная графика, Canvas представляет растовые изображения. Но тем не менее области применения обеих технологий на веб-страницах сильно пересекаются. Читать далее →

Все здорово, но без возможности динамически менять содержимое и взаимодействовать с пользователем все эти графические возможности существенно теряют значимость. Читать далее →

html5ru.com

Графика на WEB-странице в HTML

Определение 1

Web-страница — это текстовый файл, созданный на языке HTML и размещенный в World Wide Web (WWW). В Web-странице кроме текста могут содержаться гипертекстовые ссылки, по которым можно осуществить переход к другим Web-страницам и просмотреть их, а также вставки в виде графики, анимации, видеоклипов и музыки.

С помощью языка HTML можно:

1. Создавать и редактировать Web-страницы.
2. Редактировать документы HTML-формата из Интернета с учетом функционирования всех внедренных в документ объектов (картинок, анимаций и т.д.).
3. Используя гипертекстовые ссылки и возможность внедрения в документ HTML-формата рисунков, диаграмм, анимации, видеоклипов, музыкального и речевого сопровождения, текстовых спецэффектов, создавать мультимедийные презентации, слайд-шоу, демонстрационные проекты.

Замечание 1

Графические изображения, как правило, хранятся в отдельных файлах. В языке HTML имеются особые теги, с помощью которых в кодах Web-страниц прописываются ссылки, представляющие собой фактические адреса этих файлов в сети Интернет. Встречая такие теги, Web-обозреватель делает запрос Web-серверу на соответствующий файл с изображением, аудио- или видеороликом и выводит его на Web-страницу в место нахождения данного тега. Любые данные (изображения, аудио- и видеоролики и др.), которые хранятся в отдельных от Web-страницы файлах, называют внедренными элементами Web-страниц. Рассмотрим подробнее процесс добавления изображения на Web-страницу.

Добавление изображений на Web-страницу

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

Добавить изображение на страницу можно, используя тег источника изображения, который имеет вид:

,

где — собственно сам тег, а scr – его атрибут. Так как атрибут scr является обязательным, то можно сказать, что вся эта запись представляет собой один общий тег. В теге источника изображения не используется соответствующего закрывающего тeга, так как тег источника является самодостаточным, и поэтому при его использовании необходимо добавлять в конце закрывающую косую черту: .

Добавление альтернативных надписей

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

Ниже представлен НТМL-код, в котором атрибут alt добавлен внутрь тега . Данный атрибут аналогично атрибуту src сообщает браузеру некую дополнительную информацию об изображении и его также всегда можно использовать вместе с тeгом .

alt=»Это картинка!» />

Функция атрибута alt заключается в определении для добавленного на Web-страницу графического элемента альтернативного текста. Альтернативным он называется потому, что отображается на экране как альтернатива для самого изображения. Атрибут alt выполняет еще одну важную функцию. Он позволяет веб-дизайнеру быть уверенным в том, что, если посетитель страницы не увидит на своем экране изображения, он во всяком случае хотя бы сможет ознакомиться с добавленной к этому изображению текстовой информацией.

При использовании атрибута alt для каждого тега , важно быть внимательным, чтобы не назначить графическим элементам несоответствующие им текстовые сообщения. К примеру, нет смысла в добавлении альтернативных текстовых надписей к элементам внешнего оформления страницы. Во избежание таких ошибок, можно присвоить атрибуту alt этих элементов пустое значение (alt=» » ). Если не задать значений другим атрибутам, браузер воспроизведет изображение в исходном размере, при этом выровняет верхний край изображения с верхним краем находящейся рядом текстовой строки. Однако можно изменить оба этих параметра, используя теги стилевых таблиц.

Атрибуты изображения

В теге имеются атрибуты, которые позволяют изменять размер изображений. Вот некоторые из них:

• height – с помощью него определяется высота изображения в пикселях или процентах;
• width – с помощью него определяется ширина изображения в пикселях или процентах.

Настройка высоты и ширины изображения

Размеры изображений, размещаемых на Web-страницах, могут задаваться с помощью вышеназванных атрибутов. Причем их значения задают либо как фиксированное количество пикселей, либо в процентах относительно размеров страницы. В представленном ниже коде HTML первый тег содержит размеры исходного изображения в пикселях (60 пикселей по вертикали и 60 пикселей по горизонтали), второй тег ширину того же изображения устанавливает равной 6% от ширины страницы, а высоту – 10% относительно высоты страницы.

аlt=»Это картинка!» hеight=»60″ />

аlt=»Это картинка!» />

Замечание 2

При воспроизведении изображений в своем окне браузер одинаково хорошо справляется с обработкой значений обоих видов. Однако необходимо помнить о том, что у посетителей Web-страниц на компьютерах может быть установлено экранное разрешение, отличное от вашего. Поэтому при изменении размеров изображения, нужно обязательно задавать оба значения изображения (высоту и ширину). При изменении только одного из этих значений, на экране изображение может оказаться вытянутым по вертикали или горизонтали.

Можно использовать создание иллюзии более быстрой загрузки изображений. Для этого нужно всегда указывать значения атрибутов height и width в независимости от того, изменены размеры изображения или нет. Поскольку они сообщают браузеру важные сведения о количестве места, требуемого для размещения изображения на странице. В ответ браузер обозначает необходимое для изображения пространство и продолжает строить другие элементы страницы, не прекращая загрузки самого изображения. В связи с этим кажется, что страница грузится быстрее, так как ее посетителям не приходится ждать полной загрузки изображения, чтобы увидеть другую информацию на странице.

Для того чтобы изображение на любом экране независимо от его разрешения занимало точно определенное пространство по ширине страницы, необходимо использовать процентные значения. Если же нужно, чтобы постоянным было разрешение самого рисунка (его размер в пикселях), необходимо использовать значения в пикселях.

Выравнивание текста и графики

Для выравнивания изображения по правому (right) или левому (left) краю текстовой строки используется атрибут align тега . Например:

аlt=»Это картинка!» hеight=»60″ align=»right» />

Для выравнивания изображения по вертикали относительно текстовой строки можно также использовать этот атрибут, который может принимать значения top, bottom и center. Значение top указывает на выравнивание верхнего края изображения по верхнему краю окружающего его текста. Значение bottom указывает на выравнивание нижнего края изображения по нижнему краю окружающего его текста. Значение center указывает на выравнивание центра изображения по центру текстовой строки.

Использование изображений в качестве ссылок

Изображения используются также для оформления гиперссылок на другие документы. В HTML изображение превращается в гиперссылку так же, как и надпись. Для этого используется тeг , в который заключается элемент страницы (в нашем случае изображение), который должен стать ссылкой. Переход по ссылке будет осуществляться по щелчку на данное изображение.

Миниатюры изображений

Кроме вышеуказанного способа, в котором изображение выступает в качестве гиперссылки, его также можно использовать как гиперссылку, осуществляющую переход от одного изображения к другому. Это необходимо в тех случаях, когда размер изображения, которое хотят опубликовать на Web-странице, достаточно велик и будет очень долго загружаться, что неприемлемо для многих посетителей. Поэтому создают уменьшенную копию этого изображения (миниатюру) и представляют ее гиперссылкой. Если посетитель страницы заинтересуется данным изображением, он, щелкнув на миниатюру, сможет перейти к просмотру полноценного изображения. Приведем пример кода:

аlt=»Щелкните, чтобы увидеть нормальное изображение.»

hеight=»60″ />

Секреты успешного использования изображений

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

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

Замечание 3

Важным является и общий размер файла всего HTML-документа, который, в свою очередь, будет зависеть не только от размера изображений, содержащихся в нем, но и от их количества. Нужно быть внимательными при использовании атрибута alt, чтобы содержание текстового сообщения всегда соответствовало самому изображению. И в обратном случае: необходимо следить за тем, чтобы изображение соответствовало представленной на странице текстовой информации.

При использовании изображений, заимствованным в сети Интернет, на создаваемой странице, необходимо проверить, не защищены ли эти изображения авторскими правами.

spravochnick.ru

Графика в HTML5 | Учебник HTML5

Приемлемое отображение динамичной ЗЭ-графики в браузере всегда было не то чтобы проблемой, а скорее даже мечтой. И эту мечту воплощали. Сначала Java-апплетами, потом Flash-сценами, VRML, псевдо-ЗЭ в SVG, наконец, псевдо-ЗЭ-построениями в canvas. И все это по тем или иным причинам не давало удовлетворительного результата. В основном из-за громоздкого и слабо модифицируемого воплощения. Будем честны: ЗЭ-графика — и без всякого веба вещь не совсем простая. Не зря же для работы с ней разработаны такие мощные программные решения, как DirectX и OpenGL, библиотеки, взаимодействующие непосредственно с памятью видеокарты. Возможно такое на веб-странице? Теперь да!

WebGL (Web — based Graphics Library) является программным JavaScript API, предназначенным для построения трехмерной графики. WebGL построена на основе OpenGL ES 2.0 и разрабатывается под кураторством Khronos Group — некоммерческой организации, ответственной за сопровождение OpenGL (широко распространенной кроссплатформенной библиотеки для реализации ЗЭ-графики). WebGL не является альтернативой или заменой canvas, напротив, работа библиотеки проходит в контексте этого HTML-элемента.

Теперь попробуем совместить интерактивность и анимацию. Напишем небольшую, но бодрящую игру (с мячиком!), дабы пояснить основные приемы создания canvas-игрушек.

Читать далее →

Разбор этой технологии стоит предварить ремаркой о том, как вообще получить к ней доступ. В настоящий момент вполне корректно отображает OpenGL контент-браузер Google Crome (или Chromium) — там она включена по умолчанию. Читать далее →

Теперь с имеющимся арсенальном средств мы вроде бы можем нарисовать буквально все! Даже трудно представить, что нам теперь недоступно. Вот только… сложно это все. Читать далее →

Шейдер — это программа, выполняемая на графическом процессоре в процессе обработки сцены для определения окончательных параметров объекта или изображения. Читать далее →

Просматривая материалы по графической ипостаси HTML5, можно заметить, что вторым по частоте упоминания термином после Canvas является даже не WebGL (о котором речь еще впереди), а в общем не такие уж незнакомые три буквы — SVG. Читать далее →

Все аргументы, которые приводились ранее, в пользу применения облегчающих жизнь библиотек при работе с Canvas 2D или SVG, можно смело умножать на пять, а может, и на десять, когда мы собираемся разрабатывать какую-нибудь, хоть сколько-нибудь сложную

Читать далее →

На первом шаге создадим контейнер для будущих шедевров:

<svg width=”300” height=”300” > </svg>

Ширину и высоту для него мы указали, как для обычного HTML-элемента. Читать далее →

Еще одна деталь — добавим в композицию текстуру (это как раз использование готового изображения). Тут все очень напоминает работу с цветом, что неудивительно: текстура в WebGL (как и в OpenGL) — это, по сути, закрашивание фигуры другой картинкой. Приступим:

Читать далее →

А что насчет кривых? Тут все не так просто.

Здесь нам придется изучить, наверное, самый главный и сложный svg-элемент — path. По существу, все основные примитивы являются частным случаем этого суперэлемента. Читать далее →

html5ru.com

Study & Dev | Blog Archive

Графики и диаграммы на веб-страницах. Часть 1

Нет лучшего и более наглядного способа отображения больших таблиц с числовыми данными, чем отображение их в виде диаграмм или графиков. Применительно к отображению диаграмм на веб-страницах у разработчиков есть и богатство подходов и конкретных инструментов, позволяющих внедрять на html-страницы не только красивые, но и обладающие некоторой долей интерактивности диаграммы. Осенью 2007 года я уже поднимал вопрос о том, как мы можем внедрять в html-страницы диаграммы. Тогда серия из двух статей была посвящена методике, когда диаграммы строились на стороне сервера, т.е. некий php-скрипт генерировал статическую картинку диаграммы и отдавал ее браузеру клиента. В ряде случаев, когда нас не устраивала статическая картинка, то использовался подход с flash-роликом внедренным в страницу, который сначала загружал с сервера поток данных в виде xml или json массива, а затем рисовал диаграмму. Сегодняшняя статья рассмотрит третий подход, когда графики строятся без использования “тяжелой артиллерии” — с помощью javascript.

Неправильным было бы говорить, что графики, построенные с помощью flash, заведомо лучше перед графиками, построенными на javascript или сгенерированными на стороне сервера с помощью php. Каждый из подходов имеет свои плюсы и минусы. Наиболее надежным и гарантированно работающим во всех ситуациях является подход с картинками диаграмм, созданными с помощью серверного php-скрипта. Недостатком является отсутствие какой-либо динамики на диаграммах, т.е. мы не можем масштабировать рисунок, динамически изменять просматриваемый диапазон значений, подгружать данные для отображения по требованию, т.е. без полной перезагрузки страницы или рисунка. Кроме того, в большинстве случаев диаграммы-картинки имеют слишком большой размер при передаче по сети. Всех этих недостатков лишены диаграммы, созданные с помощью javascript или flash. На рынке есть большое количество как платных, так и бесплатных библиотек, позволяющих строить графики с помощью flash. Однако если вы не располагаете знаниями в actionscript и flash, то эти библиотеки и создаваемые ими графики приходится рассматривать как “черные ящики”. Плюс, для создания хорошего и удобного интерфейса необходимы средства взаимодействия между javascript (ведь на нем и создается львиная доля обработчиков событий в html-страничке) и flash. Гораздо удобнее если и интерфейс веб-странички и графики управляются единым образом, т.е. с помощью javascript. Единственная неприятность в том, что изначально в стандарте javascript не предусматривалось каких-либо средств для рисования. Поэтому приходится “выкручиваться” с помощью смежных технологий, таких как svg, canvas, vml, которые, к сожалению, не поддерживались всеми браузерами. Так идеальным средством для рисования диаграмм, даже самых сложных, был бы canvas. Вкратце, canvas – это специальный тег, создающий на html-странице прямоугольную область рисования. Затем вы, вызывая javascript-функции, можете рисовать линии, полигоны, закрашивать области разными цветами. Если эта тема вас заинтересовала, то я опубликовал на своем сайте пару статей, рассказывающих о рисовании с помощью canvas (Тег html canvas. Часть 1 и Тег html canvas. Часть 2). Увы и ах, но поддержка тега canvas уже несколько лет есть и в opera и в firefox, но разработчики internet explorer, даже в последней восьмой версии браузера не спешат поддерживать требования стандарта html 5. Еще одним доступным инструментом рисования с помощью javascript является SVG. SVG – это текстовой, основанный на xml, формат для описания как статических, так и динамических изображений. Подобно тому, как мы с помощью html тегов создаем структуру веб-страницы, так и с помощью тегов svg мы управляем тем из каких графических примитивов будет составлено изображение. Например, следующий пример, я любезно позаимствовал с сайта wikipedia (текст примера вполне читаем, если выделить в нем ключевые слова “circle” – круг, “fill” – заливка и т.д.):

1. <?xml version="1.0" encoding="utf-8" standalone="yes"?>

2. <svg version = "1.1"

3.   baseProfile="full"

4.   xmlns = "http://www.w3.org/2000/svg" 

5.   xmlns:xlink = "http://www.w3.org/1999/xlink"

6.   xmlns:ev = "http://www.w3.org/2001/xml-events"

7.   height = "400px"  width = "400px">

8.   <rect x="0" y="0" 

9.     fill="none" stroke="black" stroke-width="5px" stroke-opacity="0.5"/>

10.   <g fill-opacity="0.7" stroke="black" stroke-width="0.5px">

11.     <circle cx="200px" cy="200px" r="100px" fill="red"   transform="translate(  0,-50)" />

12.     <circle cx="200px" cy="200px" r="100px" fill="blue"  transform="translate( 70, 50)" />

13.     <circle cx="200px" cy="200px" r="100px" fill="green" transform="translate(-70, 50)" />

14.   </g>

15. </svg>

Вы можете скопировать текст примера в блокнот, сохранить под именем example.svg или example.xml. Затем, открыв файл в firefox, opera либо в google chrome, вы увидите изображение трех пересекающихся кругов красного, зеленого и синего цвета. С помощью svg можно создавать очень сложные, насыщенные элементами изображения, и делать это можно не только с помощью блокнота, но и рисуя картинки в полноценных графических редакторах, например, corel или inkscape. Большого смысла в использовании svg, кроме создания векторных и, соответственно, масштабируемых изображений, нет. Гораздо проще и привычнее сохранять рисунки в традиционных форматах jpg, gif или png. С другой стороны, преимуществом svg является динамичность, т.е. размещенное на странице svg изображение не статично и вы можете с помощью javascript манипулировать картинкой – т.е. создавать анимацию. Несколько лет назад в internet было распространено мнение, что в ближайшем будущем открытый и свободный формат svg станет “убийцей” проприетарного формата flash и заменит его как средство создания всевозможных баннеров, анимационных роликов и спецэффектов на страницах. Как и многие другие “киллеры-альтернативы” svg закончил ничем. Главным недостатком svg является то, что в браузере internet explorer поддержки формата svg нет, если только вы не будете устанавливать специальный плагин. Таким образом, получается, что для internet explorer не работает ни один из стандартных для других браузеров подходов с рисованием на javascript: не работает ни canvas, ни svg. К счастью, для internet explorer доступен подход с подменой отсутствующей функциональности canvas/svg на технологию vml (никакими другими браузерами кроме IE не поддерживаемыми). Ирония судьбы в том, что в далеком 1998 г. microsoft внесла на рассмотрение в консорциум W3C стандарт VML (Vector Markup Language) как язык описания векторных изображений. В последствии VML и разрабатывавшийся параллельно язык PGML легли в основу SVG (Scalable Vector Graphics). Я хочу посоветовать всем, кто заинтересован в рисовании на javascript, обратить внимание на библиотеку Raphael. Она представляет собой “обертку” с унифицированным интерфейсом над svg и vml. Так, не изучая теги svg и, уж тем более, не касаясь мертворожденной vml, вы можете создавать сложные и красочные изображения, которые будут гарантированно доступны для safari, google chrome, opera, firefox и даже internet explorer. По правде говоря, Raphael не является специализированной библиотекой для создания графиков или диаграмм, но не упомянуть о ней будет просто преступлением. Как вывод: описываемые далее javascript-библиотеки нужно применять очень осторожно, зная, что часть посетителей сайта диаграммы может не увидеть. Здесь наиболее уместен прием с “progressive enhancement”, т.е. когда на странице есть массив данных в виде html-таблицы и эта информация доступа всем посетителям, но в том случае, если перед нами посетитель с “правильным браузером”, то он получает возможность дополнительно увидеть содержимое таблицы в виде наглядного графика. Если же требование доступности изображения с диаграммой является основным, то лучше всего генерировать файлы с картинками на сервере.

Итак, первая библиотека, о которой мы поговорим сегодня, – это Flot (домашний сайт проекта http://code.google.com/p/flot/). Для того, чтобы вы сразу составили представление о том, что умеет делать flot, прошу посмотреть примеры использования flot по следующему адресу http://code.google.com/p/flot/wiki/FlotUsage Flot построен на базе другой известной javascript библиотеки jquery. В то время как jquery представляет собой набор универсальных функций для манипулирования DOM-деревом html-страницы, то flot специализируется именно на создании диаграмм с помощью canvas и vml. В арсенале flot есть поддержка построения графиков с произвольным количеством серий данных. И каждая серия может быть либо в виде линии, либо в виде столбца. Причем возможно совмещение на одной диаграмме нескольких видов отображения серий данных одновременно, равно как вы можете на одной диаграмме показать две оси OX или OY. Каждая из серий может иметь оформлена в виде обычной линии с маркерами или без, вы можете залить в определенный цвет площадь, занимаемую линей диаграммы, можно даже задать график в виде набора точек не связанных линией между собой. Давайте рассмотрим на примерах описанные выше возможности flot. Начнем мы с того, что распакуем скачанный с сайта http://code.google.com/p/flot/ архив с flot и рассмотрим его содержимое. В поставку входит библиотека jquery (версия 1.2.3, но я успешно использовал flot вместе с последней на момент написания статьи версией jquery 1.3.2). Далее в архиве находится сама библиотека jquery.flot.js (в сжатом виде занимая всего 30 килобайт), затем идет excanvas.js (размер 13 кб.). Последняя библиотека содержит код имитации canvas для браузера internet explorer c помощью VML. Для того, чтобы для пользователей opera или firefox не подключать библиотеку extcanvas.js, то рекомендуется использовать условный комментарий, срабатывающий только для internet explorer:

1. <html>  

2.  <head>

3.     <!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.pack.js"></script><![endif]-->

4.     <script language="javascript" type="text/javascript" src="jquery.js"></script>

5.     <script language="javascript" type="text/javascript" src="jquery.flot.js"></script>

6.  </head> 

7.  <body>

8.   <div></div>

9. </body>

10. </html>

Вкратце, после того как я подключил все три нужные для работы flot библиотеки мне нужно создать внутри html-страницы пустой тег div, играющий роль заглушки для графика (важно указать начальные размеры блока). Именно внутри этого div-а и будет через несколько минут построен график. Что касается, собственно, построения графика, то все сводится к вызову одной единственной функции “plot”. Единственная сложность в том, что нужно подготовить для нее как данные (т.е. массив пар X, Y), а также специальный объект “конфигурации”, который говорит flot-у, как нужно интерпретировать массив данных и как должны выглядеть оси, легенда и остальные визуальные характеристики диаграммы. В следующем примере рисуются графики трех функций y1=sin(x), y2=sin(x), y3=x^2. Построение диаграммы можно выполнить только тогда, когда было полностью загружено dom-дерево html-страницы. Для этого я использовал стандартный для jquery прием, привязав вызов функции “doFlot” к событию “domReady”. Внутри функции “doFlot” я в цикле формирую три массива со значениями серий:

1. // привязываем функцию doFlot к событию “html-страница” загружена

2. $(document).ready(doFlot);

4. // и сама функция построения диаграммы

5. function doFlot (){

7.  var seriesSin = [];

8.  var seriesCos = [];

9.  var seriesX2 = [];

10.  // формируем массивы с данными

11.  for (var x = -Math.PI/2; x <= Math.PI/2; x+=0.1){

12.    seriesSin.push ([x, Math.sin(x)]);

13.    seriesCos.push ([x, Math.cos(x)]);

14.    seriesX2.push ([x, x*x]);

15.  }

17.  var chartConfig = { 

18.    xaxis: {},

19.    legend: {},

20.    yaxis: {},

21.    x2axis: {},

22.    y2axis: {},

23.    points: {},

24.    lines: {},

25.    bars: {},

26.    grid: {},

27.    selection: {},

28.    shadowSize: 4,

29.    colors: []   

30.  };

32. // и строим саму диагрумму

34.  $.plot($("#placeholder"), 

35.     [ 

36.       { data: seriesSin, label: "sin (x)" },

37.       { data: seriesCos, label: "cos (x)" },

38.       { data: seriesX2, label: "x^2" }

39.     ], 

40.     chartConfig);

41.  };

Итак, три величины были переданы как аргументы функции plot: ссылка на html-блок страницы, затем массив с данными для серий диаграммы (каждая серия состоит из массива данных “data” и надписи “label”). Третий же параметр chartConfig – управляет внешним видом диаграммы. В предыдущем примере я просто перечислил то, на какие категории разделяется список всех доступных конфигурационных переменных. К слову, если вы откроете исходный текст файла библиотеки jquery.flot.js, то в самом начале файла увидите перечень всех доступных для настройки конфигурационных переменных. И хотя не для всех из них есть комментарии, но догадаться о значении переменных вполне возможно исходя из их названий. К примеру, внутри объекта “xaxis” будут храниться настройки внешнего вида первой оси OX диаграммы (нижней). Из настроек представляющих для нас интерес можно, прежде всего, выделить переменные “min” и “max”, управляющие диапазоном значений по оси OX. Если эти значения не задать явно, то flot автоматически эти значения исходя из массива данных. Конечный результат выполнения примера показан на рис. 1.

Очень часто диаграммы показывают зависимость изменения во времени некоторой величин. В этом случае мало указывать массив исходных данных так (в пример я хочу показать значения прибыли некоторой организации за полтора года):

1. var seriesProrofit = [];

2. var i = 0;

3. for (var i = 0; i < 18; i++)

4.   seriesProrofit.push ( [new Date (2005, i, 1), 100+Math.tan(i/2)*i ]);

Если такие данные подать на вход функции plot, то хотя сама кривая будет нарисована верно, но подписи для этой оси будут иметь неожиданные значения – какие-то огромные да еще и отрицательные числа. А ведь нам хотелось бы видеть названия месяцев и номера года. Для того, чтобы подсказать flot о правилах форматирования оси OX, во-первых, нужно указать тип оси:

1. var chartConfig = { 

2.   xaxis: {mode: “time” },

3.   // и все как обычно …

4. }

Даже сейчас flot будет достаточно умен, чтобы выбрать тип подсказок в зависимости от диапазона значений оси OX. В моем примере, захватившем весь год 2005 и еще половинку 2006 г., flot выводит как подписи оси OX и номер года, и название месяца (правда, на английском). Если же диапазон будет умещаться в рамках одного года, то подписи будут только с названиями месяцев. А если вы решите поэкспериментировать и укажите, что хотите построить график не для 18, а для 180 месяцев, то flot масштабирует подписи, так что будут отображаться только номера годов. К слову, если нужно поменять названия месяцев с английского на русский, то нужно указать массив с названиями месяцев как значение свойства “monthNames ”. Для еще более тонкого контроля над внешним видом подписей оси OX можно использовать конфигурационную переменную “timeformat”, значением которой является строка с шаблоном форматирования даты/времени. В этой строке могут находиться специальные символы. Например ‘%h’ и ‘%H’ служит для подстановки значения часов (во втором случае значение количества часов всегда выровнено до двух цифр). Символ ‘%M’ служит для подстановки количества минут, символ ‘%S’ задает количество секунд. Номер дня месяца подставляется вместо поля ‘%d’, а номер месяца вместо символа ‘%m’ (название месяца замещает символ ‘%b’). И последним идет номер года – ‘%y’. К сожалению, полностью полагаться на flot в определении того, как должны быть сформированы подписи отметок по оси OX не возможно, поскольку flot может ошибиться и вывести настолько большое количество отметок (tick-ов) и так близко друг к другу, то они сольются (по-умолчанию flot делает отметки каждые 100 пикселей). Поэтому было предусмотрена конфигурационная переменная ticks. Чтобы понять, как влияет на построение графика ticks лучше всего читать справку по flot и много поэкспериментировать. В самом просто случае ticks равно числу отметок, которые будут нанесены на ось OX, в более сложных случаях можно указывать значение интервала, через который нужно делать отметки. Обратите внимание на то, как выглядят подписи на рис. 2.

1. var chartConfig = { 

2.   xaxis: {mode: "time", 

3.   monthNames: 

4.       [

5.         "январь", "февраль", "март", "апрель", "май", "июнь", 

6.         "июль", "август", "сентябрь", "октябрь", "ноябрь", "декабрь"

7.       ],

8.   timeformat: "%d %b %y", 

9.   ticks: 5

10.   }, 

11.   // и все как обычно 

12. }

В следующий раз я завершу рассказ об основных и наиболее важных функциях flot (о том, как управлять легендой, настройкой внешнего вида линий и “сетки” данных). А затем я перейду к рассказу об других интересных javascript библиотеках, позволяющих создавать иные типы диаграмм, кроме линейных и столбчатых.

study-and-dev.com