Визуализация данных с помощью ApexCharts

ApexCharts — это современная библиотека диаграмм, которая помогает разработчикам создавать красивые и интерактивные визуализации для веб-страниц с помощью простого API, а React-ApexCharts — это интеграция ApexChart с React, которая позволяет нам использовать ApexCharts в наших приложениях. Эта статья будет полезна тем, кому необходимо показать сложные графические данные своим клиентам.

Начиная

Сначала установите компонент React-ApexCharts в свое приложение React и импортируйте react-apexcharts .

 npm i react-apexcharts apexcharts import ReactApexCharts from 'react-apexcharts'

Основными компонентами ApexChart являются его объекты конфигурации. В объекте конфигурации мы определяем свойства series и options для диаграммы. series — это данные, которые мы хотим визуализировать на графике. В серии мы определяем данные и имя данных. Значения в массиве данных будут нанесены на ось Y диаграммы. Название данных появится при наведении курсора на график. У вас может быть один или несколько рядов данных. В options мы определяем, как мы хотим, чтобы диаграмма выглядела, функции и инструменты, которые мы хотим добавить к диаграмме, а также метки осей x и y диаграммы. Данные, которые мы определяем в свойствах series и options объекта конфигурации, — это то, что мы затем передаем в реквизиты series и options компонента ReactApexChart соответственно.

Вот пример совместной работы компонентов ApexChart. (Мы подробнее рассмотрим их позже в статье.)

 const config = { series: [1, 2, 3, 4, 5], options: { chart: { toolbar: { show: true }, } } } return ( <ReactApexChart options={config.options} series={config.series} type="polarArea" /> )

Просматривая документы, вы заметите, что ширина, высота и тип диаграммы определяются в объекте параметров, как в приведенном ниже фрагменте кода.

 const config = { series: [44, 55, 13, 43, 22], chart: { width: 380, type: 'pie' } },

Это связано с тем, что документы были написаны с учетом ванильного приложения JavaScript. Мы работаем с React, поэтому определяем ширину, высоту и тип, передавая их в качестве свойств компоненту ReactApexCharts . Мы увидим, как это работает, в следующем разделе.

Линейные графики

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

Эта диаграмма состоит из следующих компонентов:

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

Мы видели, как выглядит линейный график и его различные компоненты. Теперь давайте пройдемся по этапам его создания.

Начнем с series . Здесь мы определяем данные ряда и его имя. Затем мы передаем options и series реквизитам компонента ReactApexChart . Мы также определяем тип диаграммы в type prop и устанавливаем его как line .

 const config = { series: [{ name: "Performance", data: [10, 21, 35, 41, 59, 62, 79, 81, 98] }], options: {} } return ( <ReactApexChart options={config.options} series={config.series} type="line" /> )

Важнейшей частью ApexChart являются данные series . Конфигурации, определенные в свойстве options , являются необязательными. Без установки каких-либо определений в options данные все равно будут отображаться. Тем не менее, это может быть не самая читаемая диаграмма. Если вы решите не устанавливать какие-либо пользовательские определения в options , он все равно должен присутствовать как пустой объект.

Давайте настроим параметры диаграммы, добавив некоторые значения в объект options , который у нас есть в объекте config .

В свойстве chart объекта options мы определяем конфигурации диаграммы. Здесь мы добавляем панель инструментов из диаграммы, установив для ее свойства show значение true . Панель инструментов предоставляет нам инструменты для управления уровнем масштабирования диаграммы и для экспорта диаграммы в различные форматы файлов. Панель инструментов отображается по умолчанию.

 options: { chart: { toolbar: { show: true }, }, }

Мы можем сделать нашу диаграмму более удобной для чтения, включив метки данных для диаграммы. Для этого мы добавляем свойство dataLabels в объект options и устанавливаем его свойство enabled в значение true . Это облегчает интерпретацию данных на диаграмме.

 dataLabels: { enabled: true },

По умолчанию обводка линейного графика прямая. Однако мы можем сделать его изогнутым. Мы добавляем свойство stroke в options и устанавливаем для его curve значение smooth .

 stroke: { curve: "smooth" }

Важной частью любой диаграммы является ее заголовок. Мы добавляем свойство title в options чтобы дать диаграмме название.

 title: { text: 'A Line Chart', align: 'left' },

Мы можем добавить метки к осям x и y диаграммы. Для этого мы добавляем свойства xaxis x и оси yaxis в options и определяем title для каждой оси.

 xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'], title: { text: 'Month' } }, yaxis: { title: { text: 'Performance' } }

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

 import ReactApexCharts from 'react-ApexCharts' const config = { series: [{ name: "Performance", data: [10, 21, 35, 41, 59, 62, 79, 81, 98] }], options: { chart: { toolbar: { show: true }, }, dataLabels: { enabled: true }, stroke: { curve: "smooth" } title: { text: 'A Line Chart', align: 'left' }, xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'], title: { text: 'Month' } }, yaxis: { title: { text: 'Performance' } } } } return ( <ReactApexChart options={config.options} series={config.series} type="line" /> )

Диаграммы областей

Диаграмма с областями похожа на линейную диаграмму с точки зрения того, как значения данных отображаются на диаграмме и соединяются с помощью линейных сегментов. Единственное отличие состоит в том, что на диаграмме с областями область, отображаемая точками данных, заполняется оттенками или цветами. Подобно линейным диаграммам, диаграммы с областями показывают, как данные изменяются с течением времени. Однако, в отличие от линейных диаграмм, они также могут визуально отображать объем. Мы можем использовать его, чтобы показать, как пересекаются группы в ряду данных. Например, диаграмма, показывающая количество пользователей, обращающихся к вашему приложению через разные браузеры.

На изображении выше у нас есть пример диаграммы с областями. Как и линейная диаграмма, она имеет заголовок, метки данных и метки осей. Заштрихованная часть диаграммы с областями показывает объем данных. Он также показывает, как данные series1 пересекаются с данными серии series2 . Другой вариант использования диаграмм с областями — отображение взаимосвязи между двумя или более фрагментами данных и их пересечения.

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

Чтобы сделать диаграмму с областями, мы устанавливаем тип диаграммы на area и обводку на smooth . Это обводка по умолчанию для диаграммы с областями.

 const config = { options: { stroke: { curve: 'smooth' } } } return ( <ReactApexChart options={config.options} series={config.series} type="area" /> )

Чтобы сделать диаграмму с накоплением, в свойстве chart объекта options мы устанавливаем stacked в true .

 const config = { options: { stroke: { curve: 'smooth' }, chart: { stacked: true } } return ( <ReactApexChart options={config.options} series={config.series} type="area" /> )

Гистограммы

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

Горизонтальные полосы являются основными компонентами гистограммы. Они позволяют нам легко сравнивать значения разных категорий.

При построении гистограммы мы начинаем с определения ряда данных для диаграммы и установки type компонента ReactApexChart на bar .

 const config = { series: [{ data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380] }], options: {} } return ( <ReactApexChart options={config.options} series={config.series} type="bar" /> )

Давайте добавим больше жизни и разнообразия полосам. По умолчанию гистограммы являются вертикальными. Чтобы сделать их горизонтальными, мы определяем, как должны выглядеть полосы в свойстве plotOptions . Мы устанавливаем Horizontal Prop в true , чтобы полосы были horizontal . Мы устанавливаем позицию dataLabels на bottom . Мы также можем установить его на top или center . distributed опора добавляет отличия нашим барам. Без него к столбцам не будут применяться отдельные цвета, а легенда не будет отображаться внизу диаграммы. Мы также определяем форму стержней, используя свойства startingShape и endingShape .

 options{ plotOptions: { bar: { distributed: true, horizontal: true, startingShape: "flat", endingShape: "rounded", dataLabels: { position: 'bottom', }, } }, }

Затем мы добавляем на диаграмму категории, метки и заголовки.

 xaxis: { categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan', 'United States', 'China', 'India'] }, title: { text: 'A bar Chart', align: 'center', },

Столбчатые диаграммы

Столбчатая диаграмма — это визуализация данных, в которой каждая категория представлена ​​прямоугольником, причем высота прямоугольника пропорциональна отображаемым значениям. Как и гистограммы, гистограммы используются для сравнения различных категорий данных. Столбчатые диаграммы также известны как вертикальные гистограммы. Чтобы преобразовать гистограмму выше в столбчатую диаграмму, все, что нам нужно сделать, это установить для horizontal оси значение false в plotOptions .

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

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

Как всегда, мы начинаем с данных series и устанавливаем type диаграммы на «столбик».

 const config = { series: [{ name: 'Net Profit', data: [44, 55, 57, 56, 61, 58, 63, 60, 66] }, { name: 'Revenue', data: [76, 85, 101, 98, 87, 105, 91, 114, 94] }, { name: 'Free Cash Flow', data: [35, 41, 36, 26, 45, 48, 52, 53, 41] }], options: {} } return ( <ReactApexChart options={config.options} series={config.series} type="bar" /> )

Это то, что мы получаем из коробки. Тем не менее, мы можем настроить его. Мы определяем ширину и форму полос в свойстве plotOptions . Мы также устанавливаем позицию dataLabel на top .

 options: { plotOptions: { bar: { columnWidth: '75%', endingShape: 'flat', dataLabels: { position: "top" }, }, }, }

Затем мы определяем стиль и размер шрифта меток данных и их расстояние от графиков. Наконец, мы добавляем метки для осей x и y.

 options: { dataLabels: { offsetY: -25, style: { fontSize: '12px', colors: ["#304758"] } }, xaxis: { categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'], }, yaxis: { title: { text: '$ (thousands)' } }, }

Чтобы преобразовать это в диаграмму с накоплением, все, что нам нужно сделать, это добавить к chart свойство stacked и установить для него значение true . Кроме того, поскольку мы переключились на диаграмму с накоплением, мы изменим endingShape на flat , чтобы удалить кривые.

 options: { chart: { stacked: true, }, plotOptions: { bar: { endingShape: 'flat', } } }

Диаграммы пирогов и пончиков

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

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

Начнем с построения круговой диаграммы. Мы устанавливаем type pie на круговую. Мы также определяем series для диаграммы и определяем метки в options . Порядок меток соответствует значениям в массиве series .

 const config = { series: [20, 10, 35, 12, 23], options: { labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'], } } return ( <ReactApexChart options={config.options} series={config.series} type="pie" /> )

Мы можем контролировать отзывчивый характер наших графиков. Для этого мы добавим свойство « responsive » в options диаграммы. Здесь мы устанавливаем контрольную точку max-width на 480px . Затем мы устанавливаем width диаграммы на 450px и position легенды на bottom . Теперь при размерах экрана 480px и ниже легенда будет отображаться внизу графика.

 options: { labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'], responsive: [{ breakpoint: 480, options: { chart: { width: 450 }, legend: { position: 'bottom' } } }] },

Чтобы преобразовать круговую диаграмму в кольцевую, все, что вам нужно сделать, это изменить type компонента на donut .

 <ReactApexChart options={config.options} series={config.series} type="donut" />

Смешанные графики

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

Давайте создадим комбинацию линейной, площадной и столбчатой ​​диаграммы.

Мы определяем данные series и type для каждой из диаграмм. Для смешанных диаграмм тип каждой диаграммы определяется в ее series , а не в свойстве type компонента ReactApexChart .

 const config = { series: [{ name: 'TEAM A', type: 'column', data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30] }, { name: 'TEAM B', type: 'area', data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43] }, { name: 'TEAM C', type: 'line', data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39] }], options: {} }

Затем мы устанавливаем тип обводки smooth и определяем ее ширину. Мы передаем массив значений, чтобы определить ширину каждой диаграммы. Значения в массиве соответствуют порядку диаграмм, определенных в series . Мы также определяем непрозрачность заливки каждой диаграммы. Для этого мы также передаем массив. Таким образом, мы можем контролировать прозрачность каждого графика отдельно.

Наконец, мы добавляем метки для осей x и y.

 options: { stroke: { width: [2,2,4], curve: 'smooth' }, fill: { opacity: [0.7, 0.3, 1], }, labels: ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov'], yaxis: { title: { text: 'Points', }, }, }

Настройка наших графиков

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

Мы можем добавлять сетки к нашим диаграммам и стилизовать их. В свойстве grid мы определяем цвета для строк и столбцов диаграммы. Добавление сетки к вашей диаграмме может сделать ее более понятной.

 options: { grid: { row: { colors: ['#f3f3', 'transparent'], opacity: 0.5 }, column: { colors: ['#dddddd', 'transparent'], opacity: 0.5 }, }, }

Мы можем настроить обводку графиков и определить их цвета. Давайте сделаем это с гистограммой. Каждый цвет в массиве colors соответствует данным в массиве series .

 options: { stroke: { show: true, width: 4, colors: ['red', "blue", "green" ] }, }

Заключение

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