Быстрое построение динамических графиков на D3 с помощью Plottable.js

Свобода Библиотека D3.js это только один из многих, который позволяет вам создавать интерактивную графику на странице. Хотя D3, пожалуй, самый популярный из всех, научиться использовать его - непростая задача.

Вот почему Plottable.js такая ценная библиотека. Это бесплатный проект с открытым исходным кодом построен на D3.js, облегчая для всех создание интерактивные графы данных с нуля.

Эта библиотека справляется со всей грязной работой, так что вы можете сосредоточиться на конкретных данных, таких как данные. трансформируемый генерирует правильный код для размера и положения любого графика, который вы выберете.

Каждый график имеет свой собственный компонент в Plottable, где вы можете скопируйте / вставьте код шаблона восстановить диаграмму самостоятельно. На момент написания статьи вы можете выбрать 10 стилей графического графика, включая гистограммы, круговые диаграммы, точечные диаграммы и диаграммы площади.

Вы можете восстановить компоненты в индивидуальном порядке а также настроить их параметры динамически. Таким образом, вы можете легко изменять интерактивные элементы, цвета, анимацию, расположение, размеры и все, что вам нужно.

полная библиотека доступен на GitHub, если вы хотите просмотреть исходный код и загрузить копию.

Но лучший способ учиться - это на примере. Вот почему вы должны взглянуть на их примеры графиков под управлением Plottable чтобы увидеть, как это работает в действии.

Каждый график полностью интерактивный, с исходным кодом для загрузки. Если вы хотите перестроить похожий граф, просто скопируйте / вставьте код JS и отформатируйте его по необходимости.

У меня есть два личных фаворита с их сайта: Календарь Тепловая карта смоделировано после доски активности GitHub и Синхронизированные графики с функциями динамического выбора.

Если вы никогда раньше не использовали D3.js, вам будет сложно изучить эту библиотеку. Особенно, потому что это написано в TypeScript, так что вы, вероятно, захотите это тоже поднять. Окончательный код скомпилирован в ES5 JavaScript, так должно работать во всех основных браузерах.

Если вы готовы погрузиться, взгляните на их Страница учебных пособий полна удобных ресурсов. Вы узнаете все, что вам нужно, чтобы начать работу с Plottable и создавать динамические веб-графики с нуля.