Я начал изучать веб-разработку и js в частности около года назад и на протяжении всего этого времени я горел желанием создать что-то на подобие библиотеки. Первым делом надо было выбрать что моё творение будет делать. Определится мне помог мой преподаватель, который просто обожает графики. Именно эта его страсть сподвигла меня написать Simple Graphs Js. Моя библиотека позволяет создавать и выводить простые графики на страницу. Я знаю что и без меня существует большое количество мощных инструментов для визуализации данных, но мне хотелось создать что-то своё с нуля, а конкурентоспособность моего детища ушла на второй план. Таким образом на данный момент функционал не блещет изобилием опций, однако это всего лишь проба пера и я надеюсь, что вскоре у меня получится смасштабировать мой проект в нечто большее.
Как это работает?
Simple Graphs Js полностью оправдывает своё название - это реально простой инструмент для создания реально простых графиков. За основу я взял html canvas, который и делает и всю основную работу по отрисовке графика.
Далее я решил добавить немного красок и сетку для наглядности.
Уже неплохо, подумал я, но для большего эффекта я добавил генерацию шкал.
На данном этапе всё выглядит достаточно сносно, но возникла проблема - масштабирование графика на странице и на следующем этапе работы велись именно в этом направлении. Кроме, непосредственно, регулировки и правильного отображения ширины и высоты графика была добавлена возможность регулировать шаг шкалы значений.
Последним, и самым сложным, этапом стало добавление интерактивных ключевых точек. На каждом ключевом моменте графика появляется точка, при наведении на которую всплывает блок с данными о значении этой точки.
На этом добавление функций пока было закончено и меня ждала долгая калибровка отрисовки, тесты с маленьким и большими значениями и прочие работы по доведению всего функционала до ума. Так же, я вывел все настройки в отдельный файл, добавил к ним комментарии и сделал возможным отключение ненужных пользователю фишек.
Вот примерно в таком виде и осталась первая версия моей библиотеки. В README на гите есть подробная инструкция по использованию. Я надеюсь, что кого-то заинтересовал моей проект и моя статья была интересна к прочтению. В моих планах значительно расширить функционал и добавить другие варианты визуализации в мою библиотеку в будущем. Открыт к любой критике и предложениям! Благодарю за внимание! Ссылка на Simple Graphs Js прилагается.