Использование возможностей визуализации данных Chart.js для улучшения ваших проектов

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

Что мы могли бы разблокировать, если бы добавили на веб-сайт возможность взаимодействия с пользователем с данными?

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

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

Итак, что же такое Chart.js?

Chart.js - это бесплатная библиотека с открытым исходным кодом, используемая для анимации графиков в файлах JavaScript и canvas элементах HTML. Он включает восемь различных типов графиков: линейные, столбиковые, кольцевые, круговые, разбросанные, пузырьковые, радарные и полярные области, но также можно смешивать и сопоставлять несколько фигур на одной странице.

Что мы планируем делать в этом руководстве?

Мы рассмотрим, как настроить Chart.js, создать начальные графики, относящиеся к мировой демографии, и стилизовать их.

Источники данных

Вот ссылки на все источники данных, используемые в этом руководстве.

Шаг 1. Включение библиотеки

Я собрал репозиторий GitHub всего, что мы рассмотрим в этом руководстве. Если вы откроете файл index.html, в вашем браузере должна появиться страница с графиками и таблицами.

Теперь откройте index.html в текстовом редакторе для кода. Чтобы легко импортировать последнюю версию Chart.js, мы будем использовать эту ссылку CDN (оканчивающуюся на Chart.min.js). Затем поместите ссылку в тег script, как показано выше.

Чтобы отформатировать наши диаграммы, добавьте ссылки CDN на Bootstrap CSS и Bootstrap JS. Если вы думаете, что дополнительная информация о Bootstrap будет полезна, посмотрите ее здесь.

Шаг 2. Подготовка HTML

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

В приведенном выше фрагменте кода мы присваиваем нашему графику (в данном случае линейному графику) id, то есть line, элементу canvas, который мы позже можем использовать для ссылки на наш назначенный элемент графика в JavaScript. Вы можете назвать этот элемент как хотите; единственное, что имеет значение, это то, что вы используете один и тот же id при обращении к графику во всех ваших файлах. Помните, что каждый id должен быть уникальным.

Шаг 3. Создание схемы на JavaScript

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

Создайте файл JavaScript (и поместите его в новую папку с именем .js, если хотите).

Давайте разберемся, что происходит в line.js. Сначала мы находим элемент canvas, добавленный ранее в наш файл index.html (обратите внимание на id line. Затем, используя этот элемент canvas, мы создаем линейную диаграмму (type: 'line') и передаем наши данные.

Шаг 4: Вставка данных

Соберите все данные, необходимые для построения графиков. Для этого примера линейного графика мы будем использовать статистику роста населения Всемирного банка. Загрузите данные (или введите их вручную, если хотите).

Затем скопируйте и вставьте данные в формат массива, как показано ниже. Это неотъемлемая часть общей структуры файлов JavaScript.

Мы также можем присвоить набору данных метку. Если вы сохраните и обновите страницу HTML, вы увидите новый линейный график. Однако мы можем предпринять шаги для настройки визуальных элементов, включая отметки и метки осей, заголовки диаграмм, цвета точек и линий, эффекты наведения и многое другое!

Шаг 5: форматирование и стили

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

Для каждой строки, которую мы хотим создать, мы добавляем еще один объект в массив datasets. Каждый объект может иметь ряд настроек; мы можем не только передавать новые данные для рисования линии, но мы можем изменять имя, поведение и внешний вид линии. Эти функции можно редактировать, как показано в готовом line.js файле. Более подробное описание всех настроек, которые вы можете выбрать, читайте в Документации Chart.js!

Готовый линейный график

До сих пор мы рассмотрели, как создавать, персонализировать и просматривать линейный график на веб-странице. Давайте посмотрим на некоторые другие визуализации, предлагаемые Chart.js. Все они включены в репозиторий, ссылка на который есть в начале этого руководства.

Другие типы визуализаций

Chart.js предлагает несколько других типов диаграмм, таких как таблицы, гистограммы, круговые диаграммы, точечные диаграммы и многое другое. Вот код JavaScript для других примеров.

Гистограмма

Круговая диаграмма

Точечная диаграмма

Стол

Этот код включен в index.html, а не в JavaScript.

Ключевые моменты, которые следует запомнить

Помните об этих советах при просмотре кода.

  • Убедитесь, что canvas id каждой диаграммы согласован во всех ваших файлах HTML и JavaScript.
  • Не забудьте связать файлы JavaScript в HTML с помощью тегов script.
  • Обязательно ставьте запятую каждый раз, когда добавляете новый объект или набор данных. В противном случае график будет отображаться некорректно (или вообще).
  • Обновите HTML-страницу после внесения значительных изменений, чтобы следить за своим прогрессом.
  • Повеселись! Делитесь своими мыслями или вопросами в комментариях.