Рисование графиков с использованием Flot
Давно ещё возникла необходимость в создании простых графиков генерируемых из базы данных. А так как я везде пихаю морально и технически устаревший ASP, то мне не хочтелось задумываться о сложности создания программной основы для создания графиков. Тем более, что заставлять сервер генерировать эти графики я так же не хотел. Вывод был очевиден. Я решил использовать JavaScript для отображения графиков. В принципе в свободном доступе существует несколько десятков библиотек для создания графиков, но мне как-то больше приглянулась библиотека Flot.
Эта библиотека позволяет отрисовывать десятки видов отображения графиков, но я остановился пока на самом простом варианте. Который и был реализован. Собственно, на примере которого я и хочу разобрать создание простого графика.
График будет состоять из 10 точек. В качестве примера будут отображаться даты и количество участников проекта Красспас. Для начала нужно подключить библиотеку с фреймворком jQuery и основную библиотеку Flot.
<script src="jquery.js"></script> <script src="jquery.flot.js"></script>
Далее пишем скрипт который инициирует массив для вывода графика и указывает id объекта в который необходимо вывести график:
<script type="text/javascript"> $(function() { var d1 = [[1, 24], [2, 21], [3, 25], [4, 25], [5,22], [6,31], [7,24], [8,26], [9,25], [10,26]] $.plot("#plot", [ d1 ]); }); </script>
Далее создаём таблицу каскадных стилей для вывода графика в красивой обёртке. Вот пример который я ипользую для своих проектах:
.flot-container { box-sizing: border-box; width: 850px; height: 450px; padding: 20px 15px 15px 15px; margin: 15px auto 30px auto; border: 1px solid #ddd; background: #fff; background: linear-gradient(#f6f6f6 0, #fff 50px); background: -o-linear-gradient(#f6f6f6 0, #fff 50px); background: -ms-linear-gradient(#f6f6f6 0, #fff 50px); background: -moz-linear-gradient(#f6f6f6 0, #fff 50px); background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px); box-shadow: 0 3px 10px rgba(0,0,0,0.15); -o-box-shadow: 0 3px 10px rgba(0,0,0,0.1); -ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1); -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1); -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1); } .flot-placeholder { width: 100%; height: 100%; font-size: 14px; line-height: 1.2em; }
Всё это собирается воедино, а в нужном месте устанавливаем div которому присваеваем нужный id и класс.
<div class="flot-container"><div id="plot" class="flot-placeholder"></div<>/div>
Собственно на этом и всё.
Более подробно и с некоторыми расширениями можно ознакомиться на реальном примере на страничке: статистика активности участников Красспас. (закрыто с 2020 года)
Если есть вопросы задавайте их в комментариях.
Тэги: программирование
Отредактировано:2020-09-10 20:14:23
На страничке "статистика активности участников Красспас" хорошо бы проставить реальные даты в дополнение к номерам протоколов.