Графики в html

Графики и диаграммы

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

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

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

Круговая диаграмма

Такая диаграмма напоминает торт, разрезанный на разного размера куски. Общая сумма всех частей составляет 100%, части делят круг пропорционально своим значениям.

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

Пример 1. Круговая диаграмма

Результат примера показан на рис. 1.

Рис. 1. Вид круговой диаграммы

В том месте документа, куда мы добавляем диаграмму, вставляем следующий код.

Ширину и высоту диаграммы задаём через стили и добавляем идентификатор для работы скрипта. Этот же идентификатор должен быть указан в document.getElementById .

Параметры диаграммы состоят из двух блоков: собственно данные для отображения (переменная data ) и настройки (переменная options ). Первая строка в data задаёт названия последующих колонок и хотя она никак не выводится, без неё отображение происходит некорректно. В options пишется заголовок диаграммы, также можно указать трёхмерность и другие настройки, все они являются необязательными и если не заданы, то принимаются по умолчанию.

Диаграмма получается интерактивной, её части подсвечиваются если навести на них курсор или на легенду.

Примеры, список параметров и описание круговой диаграммы доступны по этому адресу: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

Гистограмма

Гистограмма — это столбчатая диаграмма, которая удобна для сравнения разных значений между собой. В качестве примера возьмём добычу нефти в XIX веке в России и США (рис. 2). На оси абсцисс (горизонтальная ось) нанесены годы, на оси ординат (вертикальная ось) — добыча нефти в тысячах тонн. Высота прямоугольников соответствует указанному значению.

Рис. 2. Гистограмма

Принцип создания этого типа диаграммы аналогичен предыдущему — добавляем тег

Пример 2. Гистограмма

Для начала добавляем тег

Резюме

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

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

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

SVG графика в HTML5

SVG (Scalable Vector Graphics – масштабируемая векторная графика) – стандарт векторной графики, разработанный консорциумом W3C.

SVG – это язык разметки для описания двухмерных графических приложений и изображений, входящий в подмножество расширяемого языка разметки XML. Сюда относится также ряд связанных графических скриптов.

SVG поддерживается всеми современными браузерами для ПК и мобильных телефонов. Некоторые функции, такие как SMIL анимации и SVG Fonts распространены не так широко.

Последней версией полной спецификации является SVG 1.1.

SVG 2 находится в стадии разработки. В нее будут добавлены новые, простые в использовании функции для SVG, а также идут работы по более тесной интеграции с HTML, CSS и DOM.

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

• Графика в формате SVG создается с использованием математических формул, которые при изменении размера изображения можно скорректировать. Таким образом векторные изображения масштабируются лучше, чем растровые.
• Размер векторной картинки обычно меньше, чем у сравнимых по качеству изображений в форматах JPEG, GIF или PNG.
• SVG графика имеет текстовый формат, который можно и править в блокноте, и рисовать в графических векторных редакторах Adobe Illustrator, CorelDRAW.
• Cкрипты и анимация в SVG позволяют создавать динамичную и интерактивную графику.
• Текст в графике SVG является текстом, а не изображением, поэтому он индексируется поисковыми системами.
• В SVG изображение можно добавить несколько ссылок.
• К SVG формату можно подключать внешние таблицы стилей CSS, глобальные стили внутри контейнера или добавлять внутренние стили с помощью атрибута style в тегах фигур и путей.

Вставка SVG на Web-страницу

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

Итак, способы вставки SVG-изображения на Web-страницу:

• прямая вставка кода в HTML-документ в контейнере . ;
• использование SVG-файла в качестве фонового изображения;
• подключение SVG-файла в HTML-документ с помощью тегов img, embed, object и iframe;
• подключение SVG-файла в PHP-документ с помощью функции include.

1. Прямая вставка SVG-кода в Web-документ

2. Использование SVG-файла в качестве фонового изображения

3. Подключение SVG-файла с помощью тега img

4. Подключение SVG-файла с помощью тега embed

5. Подключение SVG-файла с помощью тега object

6. Подключение SVG-файла с помощью тега iframe

7. Подключение SVG-файла с помощью функции include

Система координат

Размеры и координаты можно задавать в различных единицах (px, pt, pc, cm, mm, em, in). Если единицы измерения не указаны, то это пиксели.

Начало отсчета координат – это верхний левый угол экрана, т.е.

Красивый JS график на сайт: лёгкая библиотека для ваших проектов

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

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

В этой статье хочу представить вашему вниманию простенькую библиотеку для создания вот таких линейных графиков. Вес библиотеки получился сравнительно небольшим: всего 18 kB в сжатом состоянии. Данная библиотека основана на оригинальном скрипте dopyo. На всякий случай приведу ссылку dopyo.js

В библиотеке liteChart я постарался убрать повторяющийся код (скрипт стал легче), добавил градиенты, заливки, улучшил визуальное отображение и ещё кое-что по мелочам. Вот что получилось:

Пример графика

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

Лёгкий старт

Шаг 1:

Скачайте библиотеку и подключите её к своему проекту:

Не имеет значения где вы её подключите, но лучше, если в «подвале» страницы. Думаю, нет смысла объяснять почему.

Шаг 2:

Создайте контейнер, где будет выводиться график и задайте ему уникальный идентификатор:

Шаг 3:

Заполняем график и вставляем его в контейнер:

Функция-конструктор liteChart принимает 2 параметра:

id (String) — обязательный
Уникальный идентификатор графика

settings (Object)
Объект содержащий данные о настройках графика. В приведённом выше примере параметр settings пустой, а значит используются настройки по умолчанию, — предустановленные.

Настройки графика

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

Анимация animate

show (true/false)
Включить или выключить анимацию.
По умолчанию: true

duration (число)
Продолжительность анимации в секундах.
По умолчанию: 0.5

Оси координат axisX и axisY

show (true/false)
Показывать или отключить ось координаты.
По умолчанию: true

color (String)
Задаёт цвет оси координат. Можно использовать цвета hex, rgb или rgba.
По умолчанию: #e9edf1

width (число)
Толщина оси координат в пикселах.
По умолчанию: 2

value (String)
Дополнительная подпись к значениям оси координат.
По умолчанию: null

minValue (число)
Минимальная величина оси координаты. Если значения values передаваемые в метод addLegend меньше установленного значения minValue, график обрезается. Если установлено 0, ось координат рассчитывается автоматически.
По умолчанию: 0

maxValue (число)
Максимальная величина оси координаты. Если значения values передаваемые в метод addLegend больше установленного значения maxValue, график обрезается. Если установлено 0, ось координат рассчитывается автоматически.
По умолчанию: 0

Смещение графика по eventCoord

x и y (число)
Смещение графика по осям x и y.
По умолчанию: 0

Заполнение поля диаграммы fill

fill (null, «origin» или «gradient»)
Задаёт способ заполнения поля диаграммы. Выбирается одно из 3 значений: null — без заполнения, «origin» — сплошная заливка, «gradient» — градиентная заливка.
По умолчанию: «gradient»

Сетка координат gridX и gridY

show (true/false)
Показывать или отключить сетку координат.
По умолчанию: true

interval (число)
Не описано…
По умолчанию: 0

fill (число)
Не описано…
По умолчанию: 1

stroke (String)
Задаёт цвет линий сетки координат. Можно использовать цвета hex, rgb или rgba.
По умолчанию: «#e9edf1»

width (число)
Задаёт толщину линий сетки координат.
По умолчанию: 2

dasharray (число/строка)
Управляет видом пунктирной обводки линий сетки координат.
По умолчанию: «0 10.04»

linecap (строка)
Свойство определяет как будут выглядеть концы линий сетки координат. Возможные значения: butt, round, square.
По умолчанию: «round»

Подписи к осям координат labels

show (true/false)
Показывать или отключить подписи к осям координат.
По умолчанию: true

fontColor (string)
Цвет подписей. Можно использовать цвета hex, rgb или rgba.
По умолчанию: «#c5c6d0»

fontSize (число)
Размер шрифта подписей.
По умолчанию: 12

fontFamily (string)
Шрифт подписей.
По умолчанию: «sans-serif»

fontWeight (string)
Толщина шрифта.
По умолчанию: «normal»

Настройки линий графика line

width (число)
Толщина линий графика.
По умолчанию: 3

style (string)
Тип линий графика. Одно из 2 значений: curve — изогнутые линии, straight — прямые линии.
По умолчанию: «curve»

shadow (true/false)
Отображать или скрыть тень от линии.
По умолчанию: true

dasharray (число/string)
Управляет видом пунктирной обводки линий графика.
По умолчанию: null

Настройки точек графика point

show (true/false)
Показывать или отключить точки.
По умолчанию: true

radius (число)
Величина радиуса точки.
По умолчанию: 5

strokeWidth (число)
Толщина обводки точки.
По умолчанию: 5

stroke (string)
Цвет обводки точки. Можно использовать цвета hex, rgb или rgba.
По умолчанию: «#ffffff»

Значения valueOnliteChart

show (true/false)
Отображать или скрыть значения над точками графика.
По умолчанию: false

Примеры

#1 График без кастомных настроек

Наш график будет выглядеть примерно так:

Пример графика по умолчанию

#2 Прямые линии с подписями по осям

#3 График со сплошной заливкой

Послесловие

Если вы разбираетесь в CSS, вы можете добавить анимации к линиям или изменить оформление графиков под свои потребности. Многие элементы имеют css классы и вы легко можете управлять внешним видом.

Графика в HTML

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

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

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

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

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

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

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

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

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

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

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

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

Значение
Rigth Hspace=10px
Left Hspace=3px	бла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла бла
Top Hspace=10px Vspace=5px
Middle Hspace=1px Vspace=12px	бла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла бла
Bottom Hspace=10px Vspace=10px	бла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла бла

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

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

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

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

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

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