От автора: рассмотрим эффективный способ создания графиков React с помощью библиотеки KendoReact Charts. Прочитав эту статью, вы узнаете, как быстро реализовать гистограммы и диаграммы с помощью библиотеки, которая обеспечивает основу для элементов визуализации данных в вашем приложении React.
Веб-приложения часто должны помочь конечному пользователю разобраться в различных типах данных. Один из лучших способов представить данные в приятной и простой для понимания форме — это визуализировать их с помощью графиков (диаграмм).
В этой статье будет продемонстрирован эффективный подход к созданию графиков React с использованием библиотеки KendoReact Charts, а также мы реализуем интерактивную кольцевую диаграмму, столбчатую диаграмму, линейную диаграмму и диаграмму Sparkline. Выберем графическую библиотеку React, которая является частью KendoReact, поскольку она многофункциональна и легко настраивается. Как часть полной библиотеки компонентов React UI, эта библиотека визуализации данных действительно выделяется своей интеграцией с более чем 90 компонентами KendoReact, что позволяет разработчикам реализовывать согласованные стили и элегантный дизайн для всего проекта. А теперь приступим!
Настройка проекта
Прежде чем мы углубимся в реализацию наших графиков React, давайте создадим новый проект React с помощью Create React App. Вы можете сделать это, выполнив приведенную ниже команду в своем терминале.
|
1 |
npx create-react-app kendo-react-graphs |
После того, как проект сформирован, нам нужно установить несколько пакетов, чтобы использовать библиотеку диаграмм KendoReact.
Через npm
|
1 |
npm install @progress/kendo-react-charts @progress/kendo-theme-material hammerjs |
Через Yarn
|
1 |
yarn add @progress/kendo-react-charts @progress/kendo-theme-material hammerjs |
Первый пакет — это библиотека kendo-react-charts, которая содержит множество компонентов диаграмм для React. В этом примере мы будем использовать тему «Material». KendoReact также предлагает темы по умолчанию (созданные внутренними UX-экспертами команды) и темы Bootstrap, но вы можете легко настроить их или даже создать свои собственные. Наконец, нам нужно установить Hammer.js, библиотеку с открытым исходным кодом для распознавания жестов, создаваемых касанием, мышью и указателем.
После установки новых зависимостей давайте очистим проект. Сначала замените содержимое файлов App.js и App.css.
src/App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import "@progress/kendo-theme-material/dist/all.css"; import "hammerjs"; import "./App.css"; function App() { return ( <div className="App"> <div className="container"> <h1>Build React Graphs The Easy Way</h1> </div> </div> ); } export default App; |
src/App.css
|
1 2 3 4 5 6 7 8 |
.container { max-width: 1080px; margin: 0 auto; } .section { padding: 50px 0; } |
В App.js мы удалили код по умолчанию, созданный приложением Create React, и вместо этого импортировали тему материала KendoReact и Hammer. У нас также есть два класса в файле App.css, чтобы добавить немного места между графиками, которые мы сейчас реализуем.
Вот и все по настройке. Запустите сервер разработки, запустив npm run start или yarn start, и вы увидите пустой экран. Добавим графики.
Создание графиков (диаграмм) React
Представьте, что вы работаете над платформой для управления заявками о приеме на работу. Эта платформа позволяет компаниям создавать объявления о вакансиях, на которые соискатели могут подавать заявки. Сотрудники, работающие в компании, создавшей объявление о вакансии, должны иметь возможность видеть множество деталей, например, сколько кандидатов подали заявки, статус заявок, сколько заявок было принято или отклонено и т. Д. Как я упоминал ранее, мы собираемся реализовать четыре типа графиков:
интерактивная кольцевая диаграмма — для отображения статуса заявок за текущий месяц
столбчатая диаграмма — показывает статус приложений за последние три месяца.
линейная диаграмма — чтобы показать, сколько позиций было заполнено, а сколько осталось
диаграмма Sparkline — чтобы показать, сколько приложений осталось обработать, чтобы достичь минимальной цели.
Интерактивная кольцевая диаграмма
Во-первых, нам нужно создать два новых файла. Первый файл constants.js содержит цвета, используемые для графиков.
src/constants.js
|
1 2 3 4 5 6 7 |
export const COLORS = { accepted: "#059669", rejected: "#B91C1C", pending: "#6366F1", interviewing: "#2563EB", total: "#D97706", }; |
Во втором файле мы реализуем кольцевую диаграмму. В каталоге src создайте новую папку с именем charts, а внутри нее — файл с именем Donut.js.
src/components/charts/Donut.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
import { Chart, ChartTitle, ChartLegend, ChartSeries, ChartSeriesItem, ChartSeriesLabels, } from "@progress/kendo-react-charts"; import { COLORS } from "../../constants"; // Graph data const applicationsStatusThisMonth = [ { status: "Accepted", value: 14, color: COLORS.accepted, }, { status: "Interviewing", value: 14, color: COLORS.interviewing, }, { status: "Rejected", value: 40, color: COLORS.rejected, }, { status: "Pending", value: 32, color: COLORS.pending, }, ]; // Show category label for each item in the donut graph const labelContent = e => e.category; const Charts = props => { return ( <Chart> <ChartTitle text="Applications status - this month" /> <ChartLegend visible={false} /> <ChartSeries> <ChartSeriesItem type="donut" data={applicationsStatusThisMonth} categoryField="status" field="value" > <ChartSeriesLabels color="#fff" background="none" content={labelContent} /> </ChartSeriesItem> </ChartSeries> </Chart> ); }; export default Charts; |
Как видите, мы импортируем несколько различных компонентов React из библиотеки KendoReact. Они используются для составления кольцевой диаграммы.
Компонент <Chart> представляет собой контейнер для всех других компонентов. <ChartTitle>, как следует из названия, используется для отображения заголовка рисунка. Компонент <ChartLegend> может быть использован, чтобы указать, если диаграмма должна отображать данные по категориям. В этом примере у нас установлен параметр visibleprop false, но вы можете переключить его на, true чтобы отобразить его.
<ChartSeries*> являются основными компонентами, поскольку они отвечают за визуализацию данных. В этом случае мы указываем, что нам нужна кольцевая диаграмма, передав свойство type=»donut» компоненту <ChartSeriesItem>. Полный список доступных опций вы можете найти в документации.
Прежде чем мы сможем увидеть график кольцевой диаграммы на экране, нам нужно обновить файл App.js, чтобы он импортировал и отрисовал компонент <Donut>.
src/App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import "@progress/kendo-theme-material/dist/all.css"; import "hammerjs"; import "./App.css"; import Donut from "./components/charts/Donut"; function App() { return ( <div className="App"> <div className="container"> <h1>Build React Graphs The Easy Way</h1> <div className="section"> <Donut /> </div> </div> </div> ); } export default App; |
Теперь вы должны увидеть на экране приведенный ниже график.
Это было быстро и легко, а графики выглядят великолепно. Однако мы не можем увидеть реальные проценты. Давайте обновим диаграмму и добавим всплывающую подсказку, которая покажет процентное распределение для каждого статуса приложения. Вернемся к файлу Donut.js и внесем следующие изменения:
1. Добавте импорт ChartTooltip.
|
1 2 3 4 5 6 7 8 9 |
import { Chart, ChartTitle, ChartLegend, ChartTooltip, // <-- Add this line ChartSeries, ChartSeriesItem, ChartSeriesLabels, } from "@progress/kendo-react-charts"; |
2. Ниже импорта создайте функцию с именем renderTooltip, отображающую разметку, которая будет выводиться во всплывающей подсказке. Эта функция будет передана компоненту <ChartTooltip>.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// imports const renderTooltip = context => { const { category, value } = context.point || context; return ( <div> {category}: {value}% </div> ); }; // other code |
3. Визуализируйте компонент <ChartTooltip>.
|
1 2 3 4 5 6 |
<Chart> <ChartTitle text="Applications status - this month" /> <ChartLegend visible={false} /> <ChartTooltip render={renderTooltip} /> {/* ChartSeries components */} </Chart> |
Ниже вы можете увидеть всплывающие подсказки в действии.
У нас есть первый график. Но что, если мы захотим увидеть результаты за последние несколько месяцев? Мы можем решить это, реализовав гистограмму React Bar.
Столбчатая диаграмма
Как и раньше, нам нужно создать новый файл для графика— Bar.js.
src/components/charts/Bar.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
import { Chart, ChartTitle, ChartLegend, ChartSeries, ChartSeriesItem, ChartCategoryAxis, ChartCategoryAxisTitle, ChartCategoryAxisItem, } from "@progress/kendo-react-charts"; import { COLORS } from "../../constants"; // Graph data const series = [ { status: "Total", data: [43, 30, 59], color: COLORS.total, }, { status: "Pending", data: [25, 15, 30], color: COLORS.pending, }, { status: "Interviewed", data: [3, 5, 1], color: COLORS.interviewed, }, { status: "Rejected", data: [14, 10, 25], color: COLORS.rejected, }, { status: "Accepted", data: [1, 3, 2], color: COLORS.accepted, }, ]; const categories = ["Jan", "Feb", "Mar"]; const seriesLabels = { visible: true, padding: 3, font: "normal 16px Arial, sans-serif", position: "center", }; const Bar = props => { return ( <Chart> <ChartTitle text="Applications status - last 3 months" /> <ChartLegend visible={true} /> <ChartCategoryAxis> <ChartCategoryAxisItem categories={categories}> <ChartCategoryAxisTitle text="Months" /> </ChartCategoryAxisItem> </ChartCategoryAxis> <ChartSeries> {series.map((item, idx) => ( <ChartSeriesItem key={idx} type="bar" gap={2} spacing={0.25} labels={seriesLabels} data={item.data} name={item.status} color={item.color} /> ))} </ChartSeries> </Chart> ); }; export default Bar; |
Вы могли заметить, что многие вещи похожи, например, компоненты диаграммы. Столбчатая диаграмма задается путем передачи свойства type=»bar» компоненту <ChartSeriesItem>.
У нас также есть новые компоненты — <ChartCategoryAxis*>. Они используются для изменения содержимого полосы на каждой оси. В этом случае мы указываем месяцы для категорий, а также метку «Месяцы» на оси Y. Мы также сделали видимым <ChartLegend>, поскольку, по сравнению с кольцевой диаграммой , у нас нет ярлыков статуса. Тем не менее, предоставляя labels, мы можем указать компоненту ChartSeriesItem отображать значения на каждой полосе.
Прежде чем мы сможем увидеть гистограмму на экране, нам нужно добавить ее в файл App.js.
src/App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* other imports */ import Bar from "./components/charts/Bar"; function App() { return ( <div className="App"> <div className="container"> <h1>Build React Graphs The Easy Way</h1> {/* other graphs */} <div className="section"> <Bar /> </div> </div> </div> ); } export default App; |
На изображении ниже показано, как теперь должна выглядеть гистограмма.
Мы можем видеть статус заявок за последние три месяца. Замечательная особенность библиотеки графов React в KendoReact заключается в том, что графики можно сделать интерактивными. Например, мы можем сделать их панорамируемыми и масштабируемыми, добавив zoomable и props pannable к <Chart>:
|
1 2 3 |
<Chart zoomable pannable> {/* chart components */} </Chart> |
Более того, также можно экспортировать графики KendoReact в различные форматы, такие как изображения или PDF. Это может быть очень полезно, если вы хотите разрешить пользователям создавать отчеты с диаграммами. Давайте посмотрим, как мы можем добавить функцию экспорта PDF.
Как экспортировать график React
Мы можем добавить функцию экспорта, воспользовавшись пакетами kendo-drawing и kendo-file-saver. Давайте их установим.
Через npm
|
1 |
npm install @progress/kendo-drawing @progress/kendo-file-saver |
Через Yarn
|
1 |
yarn add @progress/kendo-drawing @progress/kendo-file-saver |
Следующим шагом будет обновление файла Bar.js. Во-первых, нам нужно импортировать метод exportVisual из @progress/kendo-react-charts и exportPDF из @progress/kendo-drawing а также saveAs из @progress/kendo-file-saver. Нам также нужно импортировать useRef, поскольку нам нужно получить доступ к экземпляру компонента <Chart>. Этот экземпляр будет передан методу exportVisual. См. обновленный код ниже.
src/components/charts/Bar.js
Импорт
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { useRef } from "react"; import { Chart, ChartTitle, ChartLegend, ChartSeries, ChartSeriesItem, ChartCategoryAxis, ChartCategoryAxisTitle, ChartCategoryAxisItem, exportVisual, } from "@progress/kendo-react-charts"; import { exportPDF } from "@progress/kendo-drawing"; import { saveAs } from "@progress/kendo-file-saver"; import { COLORS } from "../../constants"; // Other code |
Компонент диаграммы
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
// Other code const Bar = props => { // Store reference to the Kendo <Chart> component const chartRef = useRef(null); // Create a PDF and download it const onPDFExportClick = async () => { const chartVisual = exportVisual(chartRef.current); if (!chartVisual) return; const dataURI = await exportPDF(chartVisual, { paperSize: "A4", landscape: true, }); await saveAs(dataURI, "chart.pdf"); }; return ( <div> <button onClick={onPDFExportClick}>Export as PDF</button> <Chart ref={cmp => (chartRef.current = cmp)} pannable zoomable> {/* Chart components */} </Chart> </div> ); }; export default Bar; |
Мы добавили кнопку, которая вызывает функцию onPDFExportClick. Функция onPDFExportClick подготавливает информацию, которая должна быть экспортирована. Затем она передается методу exportPDF, который подготавливает файл и преобразует его в файл dataURI. И последнее, но не менее важное dataURI: передается методу saveAs, который запускает загрузку файла. Вы можете применить эту логику и к другим диаграммам KendoReact. Если вы хотите узнать больше о доступных вариантах экспорта, вы можете посмотреть подробную документацию.
Линейная диаграмма
Пока что мы реализовали два типа графиков: кольцевая диаграмма и столбчатая диаграмма. Давайте посмотрим, как мы можем использовать линейный график для отображения информации о количестве выполненных и незавершенных заданий за последние три месяца. Опять же, нам нужно создать новый файл, на этот раз с именем Line.js.
src/components/Line.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
import { Chart, ChartSeries, ChartSeriesItem, ChartValueAxis, ChartValueAxisItem, ChartCategoryAxis, ChartCategoryAxisItem, ChartTitle, ChartLegend, } from "@progress/kendo-react-charts"; import { COLORS } from "../../constants"; export const series = [ { name: "Total", data: [19, 9, 20], color: COLORS.total, }, { name: "Pending", data: [12, 6, 15], color: COLORS.pending, }, { name: "Fulfilled", data: [7, 3, 5], color: COLORS.accepted, }, ]; const categories = ["January", "February", "March"]; const Line = props => { return ( <Chart pannable zoomable style={{ height: 350 }}> <ChartTitle text="Application status - last 3 months" /> <ChartLegend position="top" orientation="horizontal" /> <ChartValueAxis> <ChartValueAxisItem title={{ text: "Job Positions" }} min={0} max={30} /> </ChartValueAxis> <ChartCategoryAxis> <ChartCategoryAxisItem categories={categories} /> </ChartCategoryAxis> <ChartSeries> {series.map((item, idx) => ( <ChartSeriesItem key={idx} type="line" tooltip={{ visible: true }} data={item.data} name={item.name} /> ))} </ChartSeries> </Chart> ); }; export default Line; |
Мы используем те же компоненты, что и в предыдущих диаграммах, с добавлением компонента <ChartValueAxis>, который используется для добавления текста заголовка и указания минимального и максимального значений для отображения на графике. Наконец, импортируйте компонент Line в App.js.
src/App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/* other imports */ import Line from "./components/charts/Line"; function App() { return ( <div className="App"> <div className="container"> <h1>Build React Graphs The Easy Way</h1> {/* other graphs */} <div className="section"> <Line /> </div> </div> </div> ); } export default App; |
Ниже вы можете увидеть гиф, который демонстрирует линейный график, сравнивающий общее количество заданий, а также количество ожидающих и выполненных.
Диаграмма Sparkline
Спарклайны — это простые небольшие графики, которые можно встраивать в таблицы, заголовки или текст. Мы будем использовать спарклайн с маркером, чтобы показать, сколько заявок было обработано, а также ежемесячный целевой показатель. Как вы видите в приведенном коде ниже, реализация графиков Спарклайн немного отличается от предыдущих графиков, так как он не использует компоненты <Chart*>, а использует <Sparkline> и <ChartValue*>.
src/components/charts/Sparkline.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
import { Sparkline, ChartValueAxis, ChartValueAxisItem, } from "@progress/kendo-react-charts"; const bulletData = [15, 75]; const bulletValueAxis = { min: 0, max: 100, plotBands: [ { from: 0, to: 100, color: "#787878", opacity: 0.15, }, ], }; const SparklineContainer = () => ( <div> <p>Applications this month</p> <Sparkline data={bulletData} type="bullet"> <ChartValueAxis> <ChartValueAxisItem {...bulletValueAxis} /> </ChartValueAxis> </Sparkline> </div> ); export default SparklineContainer; |
Вы можете настроить внешний вид графика, изменив реквизиты, передаваемые компоненту <ChartValueAxisItem>. В этом случае мы раскладываем объект bulletValueAxis. Последнее, что нужно сделать, — это импортировать компонент Sparkline и отобразить его в файле App.js.
src/App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// Other imports import Sparkline from "./components/charts/Sparkline"; function App() { return ( <div className="App"> <div className="container"> <h1>Build React Graphs The Easy Way</h1> {/* other graphs */} <div className="section"> <Sparkline /> </div> </div> </div> ); } export default App; |
Вот как выглядит окончательный результат.
Чтобы увидеть полный список типов диаграмм, которые может отображать Sparkline, вы можете проверить страницу документации KendoReact Sparkline.
Заключение
Мы рассмотрели, как создавать графики React, используя в качестве примера эти четыре типа графиков из пользовательского интерфейса KendoReact и библиотеки визуализации данных: Donut, Bar, Line и Sparkline. Создавать графики с помощью KendoReact очень просто, поскольку он предоставляет множество готовых компонентов, которые многофункциональны и легко настраиваются.
Если вы хотите получить доступ к полному примеру кода для этой статьи, вы можете найти его в этом репозитории GitHub.
Автор: Thomas Findlay
Источник: www.telerik.com
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен
