В этом посте я покажу вам, как создавать диаграммы в вашем веб-приложении, используя многоразовую библиотеку диаграмм C3.js.
Введение
C3.js — это библиотека диаграмм JavaScript на основе D3.js (D3 = Data Driven Document). Он прост в использовании, настраивается и предоставляет хороший API. Его можно использовать для создания визуализаций с использованием SVG, HTML и CSS.
Зачем использовать C3.js
C3.js — это простая оболочка вокруг D3.js, которая быстрее обрабатывается, имеет хорошую кросс-браузерную совместимость и очень проста в интеграции.
Простота в использовании: C3.js упрощает визуализацию диаграмм на основе D3, заключая код, необходимый для построения всей диаграммы.
Это легко настроить.
API/Управляемость: C3 предоставляет множество обратных вызовов для доступа к состоянию графика. Используя эти API и обратные вызовы, вы можете обновлять диаграмму даже после ее отображения.
Настройка среды
Опция 1:
Вы можете использовать следующую ссылку для онлайн-площадки C3. Это позволит вам быстро попробовать C3 с помощью веб-браузера, ничего не устанавливая.
http://jsfiddle.net/7kYJu/4742/
Вариант-2:
Это тот, который я буду использовать в этом посте. Я настрою проект на своей локальной машине. Я использую код Visual Studio для разработки. Ниже приведены шаги:
- Стартовый проект. См. пост о Basic Front-end Dev. Настройка среды для получения инструкций.
- npm i c3 (для установки c3 через npm или см. ссылку «Начало работы» для других вариантов).
- npm i d3 (нам также нужен d3, так как от него зависит c3).
- Обновите страницу index.html, указав необходимые ссылки на JavaScript и CSS (см. следующее изображение).
- Если вы клонируете репозиторий кода этой демонстрации, все уже настроено для вас.
Index.html
Вот главный раздел index.html, он содержит ссылки на таблицы стилей и файлы JavaScript для начальной загрузки и jQuery:
На следующем рисунке показан основной раздел страницы. У нас есть div для диаграммы, которую мы будем использовать для рендеринга диаграмм. У нас также есть несколько ссылок на сценарии для C3.js, а также одна для нашего приложения, т. е. app.js.
Теперь вы можете запустить приложение с помощью команды npm start, открыть веб-браузер и посетить http://localhost:3000:
Создание круговой диаграммы
Хорошо, давайте начнем с простого и создадим круговую диаграмму.
Мы провели опрос и спросили наших клиентов, нравится ли им наше приложение или нет. Пришли результаты опроса, и теперь мы хотим показать результаты в красивой визуализации. Мы хотим показать, скольким пользователям нравится приложение, скольким оно не нравится, а скольким даже не хочется отвечать. В этом случае использование круговой диаграммы действительно полезно.
В app.js обновите код следующим образом:
мы используем функцию generate из c3, мы предоставляем ей целевой-div (диаграмму), который у нас уже есть в index.html. затем объект данных содержит информацию о результатах нашего опроса, и мы определяем тип диаграммы «круговая». Это стиль c3, и мы должны предоставить данные в этом формате. свойство size содержит ширину и высоту диаграммы.
и вот вывод этого кода:
Создание линейного графика
Линейные диаграммы более удобны для визуализации временной шкалы. В этом случае мы хотим увидеть отзывы пользователей за последние 12 месяцев.
Этот тип диаграммы удобен, чтобы показать, как данные изменяются с течением времени.
Вот код JavaScript (в файле app.js), который создает диаграмму и привязывает ее к div в index.html:
Вы можете видеть, что этот код немного больше, чем пример круговой диаграммы. У нас по-прежнему есть атрибут bindto, атрибут данных теперь содержит больше данных и типов. Атрибут оси позволяет нам настроить ось Y в этом примере. После вывода диаграммы, сгенерированной этим кодом.
Мы можем дополнительно настроить его, например, изменив атрибут type, как показано ниже:
и теперь визуализация будет такой, как показано ниже (теперь у нас есть и столбцы, и линии):
Теперь давайте сделаем еще один шаг и учтем, что мы хотим отображать значения месяца вместо чисел по оси x данных результатов нашего опроса. Мы можем добиться этого, немного изменив наш код, как показано ниже:
Обратите внимание на отмеченные строки для обновленного кода, и вот результат изменений, и вы можете видеть, что теперь диаграмма показывает названия месяцев вместо чисел по оси x:
Настройка CSS
Настройка линейного графика (размер линии):
Для этой настройки мы будем использовать CSS.
Добавьте следующий стиль в site.css. здесь мы ориентируемся на тип линии на нашем графике, и с помощью этого простого стиля мы можем настроить размер линии.
Настройка размера и цвета осей x и y
Вот пример, как вы можете изменить цвет осей x и y:
Резюме
Это было основное введение в библиотеку диаграмм C3.js. Мы узнаем, что он основан на D3 и упрощает создание визуализаций. Существует множество типов диаграмм, которые вы можете использовать в своих веб-приложениях, и вы можете узнать больше о них на официальном сайте по ссылке эта.
Ссылки по теме
(Git) репозиторий исходного кода
Первоначально опубликовано на https://hexquote.com 22 декабря 2020 г.