В этом посте я покажу вам, как создавать диаграммы в вашем веб-приложении, используя многоразовую библиотеку диаграмм 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 г.