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

Начать работу с Victory довольно просто. После того, как вы создали свое приложение React, просто запустите npm install victory и добавьте import * as V from ‘victory’; в начало файла index.js (или там, где вы его используете). При этом будет импортирована вся библиотека Victory, но вы можете настроить импорт по мере необходимости, чтобы отразить те части библиотеки, которые вы используете.

Далее вы, вероятно, захотите взглянуть на различные типы диаграмм, которые доступны для победы. Полный список находится в документах, но есть множество вариантов, от простых старых гистограмм и круговых диаграмм до гистограмм и диаграмм Вороного.

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

Для гистограммы каждая точка данных должна иметь два значения: одно для оси X и одно для оси Y. В нашем случае значение оси X назначает точку данных новой полосе, представляющей отдельное видео, а значение оси Y определяет, насколько высокой должна быть эта полоса по оси Y, показывая, сколько у нее просмотров.

Вы захотите организовать свой набор данных в виде массива. Каждая точка данных должна быть объектом JavaScript с двумя ключами: один для оси x и один для оси y.

Наши данные выглядят так:

[
  {
    video: "Blue Is Pretty Special: \nHow Nature Gets the Blues",
    views: 235678
  },
  {
    video: "The Insect Nothing Messes With: \nMeet the Velvet Ant", 
    views: 502738
  },
  {
    video: "Bacteria Could Someday \nPower Our Cell Phones", 
    views: 140846
  },
  {
    video: "5 Ways Orcas Have Earned \nthe Nickname 'Killer Whale'", 
    views: 192457
  },
]

Символы новой строки \n создают разрывы строк в заголовках видео, поэтому метки не перекрываются по оси x. Есть несколько разных способов объяснить это с помощью Victory, но создание нескольких строк таким образом — самый простой подход для наших целей.

Для удобства чтения я бы рекомендовал хранить ваш набор данных в переменной. Мы назовем наш videoData.

И это все, что вам нужно для настройки гистограммы! Чтобы отобразить его, код JSX в вашем операторе return должен выглядеть примерно так:

<VictoryBar data={videoData} x=“video” y=“views” />

Серьезно, вот и все. Реквизиты x и y просто сообщают Victory, какие ключи соответствуют значениям x и y на диаграмме. Готово!

Хорошо. Для этого может потребоваться немного больше информации — скажем, некоторые детали осей, чтобы сказать вам, на что вы на самом деле смотрите.

Вы можете настроить внешний вид осей, дав инструкции по форматированию Victory с помощью компонента <VictoryAxis />.

Прежде чем приступить к настройке, вам необходимо импортировать компонент <VictoryChart />, чтобы использовать его в качестве контейнера для ваших компонентов <VictoryAxis /> и <VictoryBar />. Импорт должен выглядеть примерно так:

import { VictoryChart, VictoryAxis, VictoryBar } from 'victory';

Базовая организация компонентов довольно проста:

<VictoryChart>
  <VictoryAxis />
  <VictoryAxis 
    // this tells Victory this component is for the y axis
    dependentAxis 
  />
  <VictoryBar data={videoData} x="video" y="views" />
</VictoryChart>

Затем вы можете добавить реквизит tickFormat к компоненту для оси Y, который сообщит Victory, как вы хотите отформатировать значения:

<VictoryChart>
  <VictoryAxis />
  <VictoryAxis
    dependentAxis
    tickFormat = { x => (`${x / 1000}k views`) }
  />
  
  <VictoryBar data={videoData} x=”video” y=”views” />
</VictoryChart>

Это… все равно выглядит не очень. Возможно, вы заметили.

Что подводит нас к настоящей силе Victory: кастомизации.

Например, когда дело доходит до стилей, у Victory есть встроенные темы, которые вы можете использовать, или вы можете переопределить эти настройки и сделать их почти полностью своими. Чтобы использовать темы, просто добавьте VictoryTheme к вашему импорту. Мы будем использовать стандартный VictoryTheme.material.

Опора domainPadding — еще один полезный небольшой инструмент — он немного перемещает крайний левый стержень, чтобы он не перекрывался с осью Y.

Наша главная проблема здесь — форматирование галочек: шрифт слишком большой, что приводит к наложению, обрезанию слов и просто общему уродству. К счастью, мы можем использовать свойство style, чтобы исправить это:

<VictoryChart domainPadding={20} theme={VictoryTheme.material}>
  <VictoryAxis
    style={{ tickLabels: { fontSize: 5 } }}
  />
  <VictoryAxis
    dependentAxis
    style={{ tickLabels: { fontSize: 5 } }}
    tickFormat={y => (`${y / 1000}k views`)}
  />
  <VictoryBar data={videoData} x="video" y="views" />
</VictoryChart>

И вот результат:

Намного лучше!

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

А пока, надеюсь, это даст вам некоторое представление о том, как начать работу с Victory. Удачного составления графиков!