Как настроить Chart.js для реагирования и динамического распределения цветов

Почему вам следует использовать Chart.js в качестве библиотеки диаграмм и как извлечь из этого максимальную пользу, когда вы это делаете

В этой статье я расскажу:

  1. Зачем использовать Chart.js по сравнению с конкурентом
  2. Как настроить и установить Chart.js
  3. Как подготовить данные для Chart.js
  4. Как динамически распределять цвета для вашей круговой диаграммы

Зачем использовать Chart.js?

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

Как использовать Chart.js с React

Если вы еще не настроили Chart.js, я рекомендую прочитать эту статью, в которой описан процесс. В двух словах:

  • Установить библиотеку
npm install react-chartjs-2 chart.js --save
// OR
yarn add react-chartjs-2 chart.js
  • Импортируйте и используйте любую диаграмму, которую хотите:
import {Bar} from 'react-chartjs-2';

< Bar data={...} />

Как подготовить данные

Обратите внимание на data={...}? Нам нужно подготовить наши данные для Chart.js.

Согласно документации, Chartjs ожидает, что ваши данные будут выглядеть так:

data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
    label: "My First dataset",
    backgroundColor: 'rgb(255, 99, 132)',
    borderColor: 'rgb(255, 99, 132)',
    data: [0, 10, 5, 2, 20, 30, 45],
  }]
}
  • labels будут метками оси X
  • datasets - массив объектов; Chart.js может отображать несколько наборов данных одновременно
  • label - метка для каждого набора данных
  • borderColor обычно одноцветный
  • backgroundColor может быть одного цвета для гистограммы или линейной диаграммы с одним набором данных. Однако для круговых или линейных диаграмм с несколькими наборами данных вам понадобится массив цветов. Подробнее об этом позже.
  • data должен быть одномерным массивом

Если вы получаете ответ JSON от REST API или массив объектов от конечной точки GraphQL, вам нужно будет управлять своими данными, чтобы получить одномерный массив целых чисел.

Хотя это возможно в обычном JS, я рекомендую установить lodash, чтобы сделать ваш код более лаконичным для обработки данных, используя:

npm install lodash --save
// OR
yarn add lodash

Затем вы можете импортировать любые lodash функции, которые хотите использовать в верхней части файла React Component, примерно так:

import { groupBy, intersection } from lodash;

Итак, ваш окончательный код может выглядеть примерно так:

Бум! Мы визуализируем диаграмму! Это будет выглядеть примерно так (но с ярлыками внизу и заголовком вверху):

Но что, если мы хотим построить круговую диаграмму? Мы не хотим использовать один и тот же цвет для каждого «кусочка» пирога.

Как динамически распределять цвета для круговой или линейной диаграммы с несколькими наборами данных

Вот мои требования к распределению цветов для моей круговой диаграммы:

  • Одновременно отображается только одна диаграмма (пользователь будет использовать кнопки, чтобы выбрать диаграмму, которую он хочет увидеть)
  • Цвета, назначенные каждой метке, должны быть одинаковыми на разных диаграммах. Например, «Неизвестно» должно быть одного цвета на всех диаграммах.
  • Цвета можно повторно использовать в диаграммах для меток, которые являются уникальными для этой диаграммы, избегая необходимости в огромном списке уникальных цветов.

Я решил это, используя несколько разных структур данных, и объясню почему ниже:

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

  • labelColors и usedColors - это словари, поэтому мы можем быстро найти цвет метки, не просматривая список.
  • usedKeys - это массив, который является пересечением labelColors и labels - он представляет собой список цветов, которые уже используются в текущем графике.
  • COLORS - это массив, потому что важно, чтобы список цветов оставался в том же порядке, поэтому мы избегаем проверки того, использовался ли один и тот же цвет несколько раз.
  • firstAvailColor является целым числом и представляет собой первый индекс внутри COLORS, в котором мы будем искать новый цвет по мере обхода ярлыков, которым еще не назначен цвет в labelColors
  • chartColors - это массив, потому что он должен быть в том же порядке, что и labels, который соответствует каждому цвету, хранящемуся в нем. Мы готовы отправить его на Chart.js.

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

Например, ваши круговые диаграммы могут выглядеть следующим образом (но с заголовком диаграммы и метками для каждого цвета, которые я вырезал):

На сегодня все! Надеюсь, это было полезно. Если у вас есть какие-либо вопросы или отзывы, не стесняйтесь размещать их ниже.