React, Chart.js и радарная диаграмма
Первоначально я намеревался сделать сообщение в блоге об использовании библиотеки D3.js в среде React, но после осознания глубины опыта, необходимого для обработки этой интеграции, я решил сохранить этот пост в блоге на более позднюю дату, поскольку окно времени я должен был написать, что этот был ограничен. Насколько я понимаю, беспрепятственная интеграция React и D3.js может быть затруднена, поскольку они оба работают с данными, манипулируя DOM, поэтому необходимо отключить один, чтобы другой мог работать бесперебойно. Поскольку цель этой записи в блоге — просто показать, как компоненты диаграммы могут отображаться в React, вместо этого будет использоваться Chart.js. Он предоставляет все наиболее часто используемые типы диаграмм и по умолчанию легко интегрируется с React.
В моем случае меня интересовало, как я могу визуально выразить данные, собранные в предыдущем проекте. Мой партнер по проекту и я получили представление о личности различных учетных записей Twitter, собирая их твиты и анализируя их с помощью API IBM Watson Personality Insights. Эти идеи были представлены в виде различных атрибутов, каждый из которых имел определенный процентиль, выделяя ключевые черты в рамках модели личности «Большой пятерки» (т. е. доброжелательность, добросовестность, экстраверсия, эмоциональный диапазон и открытость). API также предоставил оценку потребностей, ценностей и потребительских предпочтений субъектов. После создания приложения, которое могло отображать такую информацию для любой учетной записи Twitter, просто отправив дескриптор Twitter в поле ввода, оно стало забавным инструментом для сравнения личностей в Twitter разных знаменитостей. Однако ему не хватало визуальной составляющей. Шаг в Chart.js, и теперь приложение, хотя все еще находится на ранней стадии разработки, похоже, может превратиться во что-то гораздо более значимое (возможно, сватовство для одиноких пользователей твиттера? или кураторское руководство о том, за кем следить? Хммм) .
Вот как я использовал Chart.js в своем приложении:
- Определить тип диаграммы
Поскольку мы собрали много данных из нашего проекта, у меня было много вариантов того, какую диаграмму использовать для визуализации этих данных. После просмотра различных типов диаграмм стало ясно, что сравнительная четкость лепестковой диаграммы, благодаря использованию в ней 4 декартовых квадрантов, была лучшим выбором. По крайней мере на данный момент. Есть много других причудливых диаграмм, которые можно было бы использовать, но, возможно, хорошим эмпирическим правилом является выбор диаграмм на основе того, насколько хорошо они соответствуют данным, какую информацию предполагается извлечь из графика и насколько удобно разработчик интегрирует его в свой код.
2. Установите зависимости
Чтобы использовать Chart.js в реакции, вы сначала устанавливаете оболочку через npm, используя следующую команду npm install react-chartjs-2 chart.js --save, а затем импортируете тип диаграммы, которую хотите использовать, в свой рабочий каталог:
import { Radar } from 'react-chartjs-2'
3. Подготовить данные
Единственная сложная часть использования оболочки диаграммы возникает, когда ваши данные должны быть переформатированы, чтобы соответствовать той же структуре, которая требуется для типа диаграммы. В моем случае мои данные пришли в виде объектов (или хэшей), поэтому мне пришлось преобразовать их в массивы, не искажая расположение всех пар ключ-значение (ключи в моем случае были метками, а значения были точками данных). Как только я понял, что могу использовать функции «ключи» и «значения», доступные в классе «Объект», подготовка моих данных стала очень простой:
buildLabels = () => Object.keys(this.props.firstHandleData)
buildValues = () => Object.values(this.props.firstHandleData)
buildValuesTwo = () => Object.values(this.props.secondHandleData)
Радарная диаграмма состоит из двух необходимых ключей из коробки для подготовки ваших данных, а именно labels и datasets и мой выглядел так
4. Визуализируйте свою диаграмму
Часть, которую вы будете с нетерпением ждать больше всего. Помните то const = radarValues заявление, которое я сделал? Последним шагом было вернуть его:
return ( <div> <Radar data={radarValues} /> </div> )
Конечно, это было сделано внутри функции render(), которую нужно вызывать внутри каждого функционального компонента в React. И результат можно увидеть ниже:
И это все люди….!
