Уже середина лета, а это значит, что каждой компании пора подвести итоги и проанализировать полугодовой прогресс. Но как лучше подать информацию? Это подводит нас к теме визуализации данных.
Визуальное представление информации делает ее более доступной и легкой для понимания. Создание сводного отчета со всей необходимой статистикой может обеспечить краткий обзор основных бизнес-идей.
Здесь вы найдете пошаговое руководство по созданию интерактивной веб-панели с помощью JavaScript.
Какой дизайн выбрать?
Перед началом работы необходимо выбрать правильное визуальное представление, наиболее подходящее для вашего проекта. Чаще всего используются диаграммы, графики, сводные таблицы и карты. Какие из них включить в информационную панель, зависит от целей анализа.
Возьмем, к примеру, мой набор данных. Для этого урока я создал список покупок iPhone в разных магазинах какой-то выдуманной компании в Калифорнии.
Во-первых, я хочу изучить данные по каждому городу каждый месяц отдельно. Лучше всего для этой задачи подходят сводные таблицы, поскольку они позволяют суммировать, сортировать, группировать и подсчитывать большие объемы данных. Но видеть общие тенденции или сравнивать графики разных метрик гораздо удобнее. Я решил использовать диаграммы с областями и гистограммы для сравнения и круговую диаграмму, чтобы посмотреть состав и процентное соотношение.
Инструменты визуализации
При использовании JavaScript для визуализации данных вам часто необходимо включать определенные внешние библиотеки. Для создания интерактивной сводной таблицы я решил использовать WebDataRocks, совершенно бесплатный инструмент для создания веб-отчетов. Он также хорошо интегрируется с FusionCharts, который я буду использовать для остальных визуализаций.
Если вы не считаете эти инструменты лучшими вариантами для себя, не стесняйтесь искать те, которые лучше соответствуют вашим потребностям. Для этого я рекомендую ознакомиться со статьей Тейта Гэлбрейта Красивые библиотеки визуализации данных JavaScript или с этим Полным списком инструментов визуализации данных для JavaScript Юлии Никитиной.
Формат данных
Для этого руководства вам необходимо хранить данные в формате JSON или CSV. Есть два способа использовать его в качестве источника данных для информационной панели: указав URL-адрес файла, в котором он хранится, или, как я сделаю здесь, создав функцию, которая его возвращает:
function getJSONData() { return [ { "month": "January", "model": "11 Pro Max", "city": "Los Angeles", "price": 1000 }, //... ] }
Шаг 1. Определите макет страницы
Во-первых, определите структуру панели инструментов. Я хочу, чтобы у меня было 4 раздела: один для сводной таблицы, а остальные для диаграмм, поэтому я создал таблицу 2×2 в HTML.
<table style="width: 100%;height: 400px"> <tr style="width: 50%; height: 400px"> <td style> <div id="wdr-component"></div> </td> <td style> <div id="fusionChartArea"></div> </td> <td></td> </tr> <tr> <td style="width: 50%;"> <div id="fusionChartPie" style="height:200px;"></div> </td> <td style="width: 50%;"> <div id="fusionChartBar" style="height:200px;"></div> </td> </tr> </table>
Шаг 2. Включите библиотеки.
Теперь нам нужно подключить инструменты визуализации данных. Для этого включите библиотеки WebDataRocks и FusionCharts в HTML-файл следующим образом:
<! -- WebDataRocks --> <link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/> <script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script> <script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script> <! -- FusionCharts --> <script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script> <script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fusion.js"></script> <! -- WebDataRocks connector for FusionCharts --> <script src="https://cdn.webdatarocks.com/latest/webdatarocks.fusioncharts.js"></script>
Шаг 3. Создайте сводную таблицу
Приступаем к формированию сводной таблицы. Во-первых, укажите контейнер, в котором он будет отображаться, нужна ли вам панель инструментов и параметры размера.
var pivot = new WebDataRocks({ container: "#wdr-component", toolbar: false, "height": 400, });
Затем добавьте отчет, объект, который содержит информацию о данных: где они хранятся и как их агрегировать.
Здесь я устанавливаю строки для отображения разных городов и столбцов для отображения месяцев:
report: { "dataSource": { "dataSourceType": "json", "data": getJSONData() }, "slice": { "rows": [{ "uniqueName": "city" }, { "uniqueName": "Measures" }], "columns": [{ "uniqueName": "month" }], "measures": [{ "uniqueName": "price", "aggregation": "sum" }] } }
Наконец, добавьте обработчик, который будет вызывать функции построения диаграмм после загрузки данных в сводную таблицу.
reportcomplete: function() { pivot.off("reportcomplete"); createAreaChart(); createBarChart(); createPieChart(); }
Шаг 4. Создайте диаграммы
Все типы диаграмм создаются одинаково: путем определения функции, которая рисует и заполняет их. Сначала вызовите конструктор FusionCharts: укажите тип диаграммы и место, где она будет отображаться.
var chart = new FusionCharts({ type: "bar2d", renderAt: "fusionchartBar", width: "100%", height: 400 });
Затем используйте метод fusioncharts.getData()
, чтобы вывести данные из сводной таблицы на диаграмму. Вы также можете определить, какую информацию включать, настроив срез, как я сделал здесь:
pivot.fusioncharts.getData({ type: chart.chartType(), "slice": { "rows": [ { "uniqueName": "[Measures]" } ], "columns": [ { "uniqueName": "model" } ], "measures": [ { "uniqueName": "price", "aggregation": "sum" } ] } }
Наконец, добавьте функцию, которая устанавливает атрибуты рендеринга, данных и диаграммы, полный список которых вы можете увидеть на сайте Fusioncharts.
function(data) { chart.setJSONData(data); chart.setChartAttribute("theme", "fusion"); chart.setChartAttribute("caption", "Total Revenue for Each Model"); chart.setChartAttribute("paletteColors", "#bc5cdb, #493999, #8790a8"); chart.render(); }
Повторите этот процесс для каждой диаграммы, которую вы хотите создать. Чем больше разных их видов вы используете, тем интереснее будет выглядеть дашборд.
Наконец, добавьте все диаграммы в обработчик, и все готово.
Для лучшего визуального восприятия я рекомендую попробовать разные дизайны, чтобы приборная панель выглядела эстетично. В этом отчете я добавил заголовок и изменил цвета. Окончательный результат вы можете увидеть ниже:
Код для этого дашборда тоже выложен на GitHub, так что если остались вопросы, можете скачать и посмотреть.
Повышение уровня кодирования
Спасибо, что являетесь частью нашего сообщества! Больше контента в публикации Level Up Coding.
Подписывайтесь: Twitter, LinkedIn, Информационный бюллетень
Level Up меняет рекрутинг в сфере технологий ➡️ Присоединяйтесь к нашему коллективу талантов