На данном сайте используются cookie-файлы и аналогичные технологии. Если, прочитав это сообщение, вы остаетесь на сайте, это означает, что вы не возражаете против использования этих технологий.
Подробнее Хорошо
Диаграммы и графики на вашем сайте
Блог
Андрей Викторович
Специалист по внедрению технических инноваций
16. 02. 2017г.
0

Диаграммы и графики на вашем сайте

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

Мы же сейчас рассмотрим три способа добавления графиков и диаграмм на ваш сайт.

Способ 1: статические диаграммы

Если у вас диаграмма не изменяется или изменяется очень-очень редко, то самый удобный способ создать диаграмму - сделать её в формате Scalable Vector Graphics (SVG), который отображается во всех браузерах. Преимущество этого формата в том, что он масштабируется без размытия (четкие линии, края), и занимает мало места (так как по сути это текст).
Создать SVG-диаграмму вам помогут дизайнеры или различные сервисы в интернете, которых по запросу в поисковиках вы сможете найти не один и не два... десятка. Если у вас есть хотя бы минимальные навыки графического редактирования, вы можете воспользоваться бесплатным редактором Vectr. Я вот воспользовался :)

Способ 2: интерактивные диаграммы на Javascript

В этом случае выбор библиотек чрезвычайно широк! Моя личная рекомендация, особенно подходящая для визуализации очень больших массивов информации, - D3.js.

Библиотека сдобрена длинным рядом примеров, наряду с их исходным кодом.
Если же у вас нет навыков программирования, но вы можете вставить JS-диаграмму через панель редактирования контента на вашем сайте, вы можете воспользоваться различными сервисами генерации диаграмм, но, к сожалению, они в большинстве своём платные. У Google-сервиса Charts ранее был онлайн-редактор диаграмм, но они его закрыли :(

Способ 3: генерация диаграмм картинками на сервере

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

Код очень простой, даже комментировать не нужно :) http://pastebin.com/SrkAZ4qS

Заключение

В заключение особо и сказать нечего. Пользуйтесь диаграммами - это красиво!

Оставить комментарий
Назад
В корзине 0 товаров на 0 р.