Визуализация данных — это способ представления больших неорганизованных наборов данных в организованном и ценном виде. Представление данных может принимать множество различных форм, таких как диаграммы — столбиковые, круговые, пончиковые, линейные и так далее. Наша задача как разработчиков в этом контексте — взять эти сложные данные и сделать их понятными для всех.
В этой статье вы лучше поймете, как использовать библиотеку JavaScript, в данном случае Chart.js, для визуализации данных, чтобы сэкономить время и усилия и повысить производительность и эффективность. Это то, что подразумевает визуализация данных, и мы можем достичь этого с помощью нескольких строк кода в Gatsby.
Давайте приступим к рассмотрению интересующих нас областей, о которых пойдет речь в этом посте:
-
Что такое Gatsby?
-
Песочница
-
Предварительные условия и установка
-
Почему важна визуализация данных?
-
Визуализация данных: использование Chart.js
-
Визуализация данных: Создание диаграмм
-
Заключительные мысли о визуализации данных
Что такое Gatsby?
Gatsby, фреймворк на основе React, позволяет ускорить создание веб-сайтов, делая их безопасными, дружественными к поисковым системам и лучше оптимизированными (с точки зрения SEO). Gatsby использует такие современные технологии, как React и GraphQL.
Песочница
Весь проект находится на Codesandbox. Чтобы запустить код, воспользуйтесь форком.
Необходимые условия и установка
В этой статье предполагается, что вы понимаете, как использовать React, поскольку это необходимо для завершения проекта. Однако вам не нужно знать Gatsby, чтобы реализовать график на стороне клиента.
Перед созданием проекта нам необходимо настроить среду разработки, установив Gatsby глобально с помощью интерфейса командной строки (CLI). Этот процесс служит основной точкой входа для запуска приложения Gatsby.
Gatsby CLI доступен через npm и устанавливается с помощью этой команды:
npm install -g gatsby-cli
Выполните следующую команду, чтобы проверить версию gatsby, которую вы сейчас используете:
gatsby –version
Создайте новый проект в нужной нам директории. Нам нужно создать леса и сгенерировать файлы, необходимые для запуска приложения gatsby, используя команду.
gatsby new
Выполнение приведенной выше команды в терминале запустит интерактивную подсказку, которая поможет вам создать новый сайт Gatsby. Руководство по завершению процесса смотрите здесь.
Чтобы запустить локальный сервер разработки на http://localhost:8000, войдите в только что созданный сайт Gatsby с помощью команды :
cd gatsby-chart
А чтобы запустить приложение, используйте команду:
npm run develop
Почему важна визуализация данных?
Визуализация данных необходима для того, чтобы помочь предприятиям, частным лицам и потребителям принимать обоснованные решения на основе тенденций в данных, что в противном случае было бы затруднительно. Применения визуализации данных в современном мире многочисленны: от сферы СМИ и презентации выступлений до рекламы и так далее. Ценность визуализации данных перевешивает недостатки, поскольку представленная информация может помочь:
-
Повысить скорость принятия решений
-
Обеспечить доступ к информации и статистике в режиме реального времени на ходу
-
донести до аудитории нужную информацию без лишних слов
-
Придать смысл сложным данным
Визуализация данных: использование Chart.js
Чтобы начать создание стандартного графика, который мы все можем использовать на своих сайтах, нам нужно установить некоторые зависимости на нашем сайте Gatsby с помощью команды CLI:
npm install chart.js react-chartjs-2
chart.js — простая, но гибкая библиотека построения графиков на JavaScript.
react-chartjs-2 — компоненты React для Chart.js дают нам множество различных компонентов диаграмм, которые мы можем использовать.
Мы будем работать с файлом pages/index.js, и вы можете удалить 404.js, так как он нам не понадобится. Удалите все внутри компонента IndexPage, и у вас должно получиться то, что показано ниже.
// pages/index.js
import * as React from 'react';
const IndexPage = () => {
return (
<main>
<title>Charting made fun</title>
<h1>Build a chart component</h1>
</main>
);
};
export default IndexPage;
Визуализация данных: Создание диаграммы
Теперь самое время заставить наш график работать. Но сначала нам нужно будет создать каталог components в каталоге src. Затем создадим файл PieChart.js, который будет содержать все компоненты.
// src/components/PieChart.js
import * as React from 'react';
const PieChart = () => {
return <p>Pie chart</p>;
};
export default PieChart;
Нам нужно импортировать файл на индексную страницу, чтобы созданный компонент круговой диаграммы отображался в браузере.
// src/pages/index.js
import * as React from 'react';
import Pie from '../components/Pie;
const IndexPage = () => {
return (
<main>
<title>Charting made fun</title>
<Pie />
</main>
);
};
export default IndexPage;
Как было сказано выше, круговая диаграмма с отрисованным сообщением должна отображаться в браузере, если вы все сделали правильно.
Давайте создадим круговую диаграмму из библиотеки react-chartjs-2, чтобы использовать круговую диаграмму. Однако другие компоненты (типы визуализации данных, которые мы можем использовать для представления наших данных в Gatsby) были предустановлены при установке зависимости, например, компоненты Chart, Line, Bar, Bubble, PolarArea и так далее. Так что все зависит от того, чего вы хотите добиться, и вы всегда можете обратиться к документации.
// src/components/PieChart.js
import * as React from 'react';
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
import { Pie } from 'react-chartjs-2';
ChartJS.register(ArcElement, Tooltip, Legend);
export const data = {
labels: ['Taxation', 'Materials', 'Profit', 'Expenses', 'Wages'],
datasets: [
{
label: 'Tax bill',
data: [25, 20, 8, 12, 34],
},
],
};
const PieChart = () => {
return (
<div style={{ width: '750px' }}>
<Pie data={data} />
</div>
);
};
export default PieChart;
В приведенном выше блоке кода нам необходимо импортировать и зарегистрировать ArcElement, Tooltip и Legend, которые мы используем. Кроме того, мы создали объект данных, содержащий метки для круговой диаграммы и данные, которые мы передадим в качестве реквизитов при рендеринге в JSX. После этого вот как должна выглядеть наша круговая диаграмма без цветов на изображении ниже:
Следующие шаги заключаются в заполнении меток, границы и круговой диаграммы цветом фона в массиве и шириной границы. Мы делаем это для улучшения эстетической ценности проекта.
// src/components/PieChart.js
import * as React from 'react';
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
import { Pie } from 'react-chartjs-2';
ChartJS.register(ArcElement, Tooltip, Legend);
export const data = {
// labels representing each of the tax bill
datasets: [
{
// label for the Pie chart
// data in an array goes here
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
],
borderWidth: 1,
},
],
};
const PieChart = () => {
return (
<div style={{ width: '750px' }}>
<Pie data={data} />
</div>
);
};
export default PieChart;
Заключительные мысли о визуализации данных
Как разработчик, убеждены ли вы, что, поскольку данные повсюду, нам необходимо упростить их представление для более широкой аудитории? Мы можем создать такие решения, которые сделают ее интуитивно понятной и интерактивной для каждого, кто впервые сталкивается с ней на вашем сайте.
В этой статье мы представили две необходимые зависимости, которые помогут построить круговую диаграмму с помощью нескольких строк кода, используя Frontend framework, Gatsby, который позволяет быстро раскрутить сайт.
Я рекомендую вам попробовать это сегодня и изменить эти скучные способы представления данных. Вместо этого используйте красивые диаграммы для себя и своей команды.
Найти полный исходный код можно на GitHub. А посмотреть проект вживую можно здесь.