Из всех привлекательных инструментов для создания сайта немногие обладают элегантностью и простотой хорошего графика. К сожалению для меня, это было довольно давно, так как у меня была возможность работать с диаграммами в Интернете, поэтому, когда недавний проект поручил мне создать инфраструктуру отчетов для приложения JavaScript, я был довольно взволнован, чтобы увидеть, какие диаграммы … строительные инструменты были доступны в эти дни.
Я был взволнован, была одна проблема, время. Мне нужно было создать рабочий прототип этих отчетов за несколько дней, поэтому моя возможность оценить бесчисленные библиотеки в лучшем случае была ограничена. Что еще более важно, я должен был быть уверен, что любая библиотека, которую я использовал, будет достаточно надежной и легкой, без скрытых ошибок, таких как проблемы совместимости браузера. Поэтому, когда я столкнулся с API Google Chart, я не мог быть счастливее.
Суть API Google Chart проста — все, что вам нужно, это URL.
Просто URL, который вы спрашиваете? Ну да, с оговоркой или два. URL выглядит примерно так:
http://chart.apis.google.com/chart?cht=p3&chd=t:20,30,40&chs=275x100&chl=Puppies|Kittens|Trogdor&chco=40cae7|408cc6|7ec0b4который показывает следующий график:
На первый взгляд, это не выглядит самым приятным из URL, но, немного покопавшись, на самом деле оказывается довольно элегантным решением. Вот как это работает:
-
каждый параметр строки запроса устанавливает свою собственную специфическую часть диаграммы. Например, там, где написано
cht=p3 -
Следующий раздел
chd=t:20,30,40Диаграммы, которые вы можете создавать, очень настраиваемы, с множеством различных типов диаграмм, начиная от скромной гистограммы и заканчивая более сложными радарными диаграммами и даже картами .
Итак, вы выбрали график, и у вас есть данные наготове. Как вы генерируете один из этих URL?
Ну, есть много библиотек, доступных для выполнения этой задачи для популярных языков, таких как PHP , Python , Rails и многих других. Лично я решил написать свое собственное решение на JavaScript, которое вы можете найти на веб-сайте City West Water — Target 155 Калькулятор водопотребления. В качестве дополнительного бонуса вы можете рассчитать свое ежедневное потребление воды, пока вы на нем (я получил 134 литра, вау!).
Я уверен, что вы согласитесь, что это супер-элегантный способ создания диаграмм и графиков, и это также очень быстро . Если вы использовали Google Chart API в каких-нибудь классных проектах, обязательно сообщите нам об этом в комментариях!