Во время буткемпа по кодированию мы с моим партнером Дэвидом создали приложение для проведения A/B-опросов под названием Это или то. Приложение позволяет пользователям создавать простые опросы с двумя вариантами ответов и голосовать за любые опросы, опубликованные на странице.
«Это или то» было весело кодировать и использовать. Вы можете сравнить любые два варианта — Джордан против Леброна, Рут Бир против Розового лимонада, Джейсон — величайший против Да, он есть. Ваше воображение является пределом.
Я действительно хотел добавить визуальный компонент, чтобы показать себя во время нашей предстоящей презентации. Я и Дэвид обсудили, как мы хотели бы, чтобы график отображал голоса, и обсудили аналогичную функцию графика, которую мы видели в Instagram.
Мы хотели подражать этому для нашего проекта. После выбора опции на графике должна отображаться текущая статистика опций. Я искал решение в Google, и Chart.js был лучшим результатом.
Chart.js — популярная и относительно простая библиотека кода для создания всевозможных диаграмм. Я установил его с помощью npm и экспериментировал с различными круговыми диаграммами и гистограммами. Я прочувствовал его синтаксис, особенно просматривая образцы. Оттуда я смог извлечь из образцов диаграмм, чтобы настроить идеальную (то, что я теперь знаю) сложенную горизонтальную гистограмму.
После установки и настройки Chart.js в моем проекте вот мой код для диаграммы выше:
Я призываю всех, кто хочет создать подобную диаграмму или любую диаграмму, проверить Chart.js. Это был невероятно полезный инструмент для этого проекта.
