Как да създадем интерактивна графика с помощта на 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 .