Хотя я еще не закончил создавать все другие части своего бюджетного приложения, сейчас я нахожусь на той стадии, чтобы начать думать о том, как строить графики приложения. В прошлый раз, когда я работал над приложением для составления бюджета, я работал с партнером, и она отвечала за построение графиков, так что я новичок в этом. В нашем групповом проекте мой партнер использовал Chart.js для создания кольцевой диаграммы расходов за каждый месяц и гистограммы для сравнения запланированной суммы с фактическими расходами, но, поскольку у меня нет никаких предварительных знаний или опыта работы с графиками в javascript, я подумал, что сейчас самое время изучить различные библиотеки диаграмм в javascript. D3.js и Chart.js - две самые популярные библиотеки графов для javascript, поэтому я начал изучать эти две.
Обе библиотеки можно использовать для создания простых для понимания, красивых и интерактивных диаграмм и графиков, но между ними были некоторые существенные различия. В D3 нет предопределенного набора диаграмм, с которыми вы можете работать. Он позволяет визуализировать и управлять набором данных практически так, как вы хотите, но поскольку он дает вам так много свободы, вам нужно выполнить гораздо больше работы, чтобы создать то, что вы хотите. Одним из основных недостатков этой библиотеки является то, что ее использование требует много времени и усилий, а также требует крутого обучения. Однако, поскольку это такой популярный инструмент, существуют большие онлайн-сообщества и обучающие программы, от которых вы можете получить помощь, и множество примеров, которые могут вас вдохновить. Посетите эту ссылку, чтобы просмотреть некоторые из красивых и профессиональных диаграмм, созданных с ее помощью.
С другой стороны, Chart.js предоставляет для работы 8 различных типов диаграмм, которые намного проще в использовании. Все диаграммы интерактивны и по умолчанию имеют легенды и всплывающие окна. Поскольку существует лишь несколько типов диаграмм и в нее встроено множество функций, по сравнению с D3 не так много места для большой настройки. У вас еще есть место для творчества, но если вам требуется уникальная и сложная диаграмма для вашего приложения, вы вообще не сможете использовать Chart.js. Я также должен упомянуть, что Chart.js основан на холсте, что означает, что если вы можете потерять ясность при изменении размера, в отличие от D3, который использует SVG, который не влияет на четкость при изменении размера. Chart.js легче и быстрее по сравнению с D3. Примеры некоторых графиков, созданных с помощью Chart.js, можно найти здесь.
В конце концов, я решил использовать Chart.js, потому что одна из основных целей моего проекта - предоставить простые и быстрые, но сделанные со вкусом диаграммы, чтобы показать пользователям тенденции их расходов. Несмотря на то, что Chart.js имеет только 8 типов диаграмм, это наиболее часто используемые диаграммы, чего мне более чем достаточно. Если и когда я приступлю к работе над приложением, которое требует более сложных, научных или профессиональных диаграмм, я был бы счастлив научиться использовать D3, но это не то, что мне сейчас нужно.
