Как да създадем интерактивна графика с помощта на CSS3 и jQuery

В тази статия ще го направим създайте интерактивна графика с помощта на CSS3 и jQuery. Ще използваме популярната библиотека jQuery, Flot. Flot е чиста javascript библиотека за изчертаване на графики, използвана от jQuery. Този плъгин е прост, но достатъчно мощен, за да създава красиви и интерактивни графики. За повече информация относно библиотеката вижте официалната документация на флота.

HTML маркиране

Първо, нека създадем HTML маркировка за диаграмата. Нека създадем блок с класа на графичната обвивка. Ще поставим два блока вътре в този блок. Първият блок с класа graph-info ще съдържа легендата на графиките и бутони за превключване между появата на графиките. Вторият блок съдържа графики (линия и лента).

jQuery и библиотеката Flot

Нека включим javascript. Първо, нека включим библиотеката jquery (например от google). Можете да използвате същата връзка или да качите файла на библиотеката jQuery на вашия сървър. След това изтеглете Flot файлове и включете jquery.flot.min.js.

Данни за графиката

Данните за графиката са масив от формата: [series1, series2, ...]. Също така ще зададем персонализирани опции за всеки тип данни.

Зареждане на диаграми

Сега ще заредим две графики, едната линия и другата лента. И двете имат няколко потребителски опции (цвят, сянка и т.н.). Също така и двамата използват данни от променливата graphData .

Стилове за блока Wrapper и неговите потомци

Първо, нека нулираме стиловете по подразбиране за всички елементи в родителския блок на графиките (добра практика е да започнете оформлението на сайта с връзките за нулиране на стила).

Добавете градиент и заоблени ъгли към обвивката, бутоните и подсказките.

И накрая, в следващата стъпка ще добавим позициониране към родителското поле и също ще му присвоим ширина, височина и подложка. Чувствайте се свободни да експериментирате с тези стойности в зависимост от вашите предпочитания за дизайн и размери на диаграмата.

Легенда и бутони

Нека започнем с добавяне на някои основни стилове на връзки. За легендите на графиките създайте малък кръг със същия цвят като самите графики (линия/лента). За да създадем кръг, ще използваме псевдо селектора: before. Този селектор ще ни позволи да вмъкнем съдържание преди съдържанието на елемента, към който е добавено.

След това добавете стилове към двата бутона, които ни позволяват да превключваме между редови и стълбови графики.

И накрая, предотвратете срутването на блокове.

Графичен превключвател

В тази стъпка ще добавим събитие за щракване за бутоните „лента“ и „линия“. При зареждане скрийте стълбовидната диаграма, след което, когато кликнете върху бутона „лента“, направете графиката видима. За да види линейната диаграма, потребителят трябва да щракне върху бутона "линия".

Добавете стилове на шрифт и текст.

Скрийте стиловете за първата и последната y-стойности:

Нека добавим подсказка вътре в елемента body. Подсказката ще бъде блок с идентификатор, равен на подсказка. Позицията за подсказка ще се изчислява въз основа на позицията на точките на графиката. Подсказката ще се покаже само когато задържите курсора на мишката върху точките на графиките.

След това добавете абсолютно позициониране, подплънки, граници към подсказката и задайте показването на none .

Заключение

Това е всичко. В крайна сметка използвахме CSS3 и приставката flot за персонализиране на графиката. Късмет. източник