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

Как создать красивую диаграмму для сайтаКак создать красивую диаграмму для сайта

Для начала нам нужно создать HTML разметку, HTML структура будет состоять из основного контейнера с классом ‘get’. Тут будет храниться вся информация необходимая нам для рисования дуг. Затем мы создаём элемент с id ‘diagram’, который будет служить контейнером для элементов диаграммы:

Вторым этапом будет создание стилей нашей диаграммы, для этого мы будем использовать CSS, тут нам нужно оформить только 2 вещи: скрыть все элементы с классом ‘get’ и установить размеры блока с id ‘diagram’:

Далее мы будем использовать JavaScript, а точнее библиотеку raphael, в первую очередь нам необходимо создать объект raphael (переменная ‘r’) и нарисовать первый круг с радиусом, который хранится в переменной ‘rad’.

Теперь ознакомимся непосредственно с атрибутами raphael:

  • alpha – угол дуги
  • random – случайно число из диапазона
  • sx, sy – начало рисования в точках
  • x, y – конец рисования в точках
  • M – определить начальную точку. Все данные пути должны быть сопровождены командой ‘moveto’.
  • A – радиус-x, радиус-y x-ось-вращения, флаг дуги, флаг-развёртки, x, y

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