Хотите узнать, как легко добавить каскадную диаграмму на веб-страницу или в приложение с помощью JavaScript? Это руководство поможет вам уверенно заниматься разработкой интерактивной визуализации данных такого рода!
Диаграммы водопада показывают, как начальное значение превращается в конечное значение в последовательности промежуточных сложений (положительные значения) и вычитания (отрицательные значения). Эти добавления и вычитания могут быть привязаны ко времени или представлять такие категории, как множественные источники дохода и расходы. В финансах диаграмму водопада часто называют мостом; возможно, вы также слышали, что это называется каскадом, Марио или диаграммой летающих кирпичей.
Чтобы увидеть диаграммы водопадов в действии и узнать, как их создавать с помощью JavaScript (HTML5), нам нужны некоторые интересные реальные данные для визуализации. В этом руководстве давайте рассмотрим отчет о прибылях и убытках Alphabet Inc. (GOOGL) за 2020 год, материнской компании Google.
Поэтому будьте со мной, чтобы шаг за шагом достичь нашей цели, и в конце вы увидите, как многие числа можно с легкостью понять, когда они проиллюстрированы в виде красивой интерактивной диаграммы водопада JS. Все на борту!
Как создать базовую диаграмму водопада JS
Вообще говоря, при визуализации любой диаграммы в JS необходимо предпринять четыре основных шага:
- Шаг 1. Создайте HTML-страницу.
- Шаг 2. Ссылка на все необходимые библиотеки JavaScript.
- Шаг 3: Загрузите набор данных, необходимый для визуализации.
- Шаг 4: Напишите какой-нибудь код JS для построения диаграмм.
Давайте выполним эти шаги сейчас и создадим классную диаграмму водопада JavaScript на основе этого подхода. На самом деле все быстро.
Шаг 1. Создайте HTML-страницу
Первое, что нужно сделать - это создать HTML-страницу, на которой можно отобразить диаграмму водопада.
<!DOCTYPE html>
<html>
<head>
<title>Waterfall Chart Example</title>
<style>
html, body, #WaterfallContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="WaterfallContainer">
// Place the waterfall chart here.
</div>
</body>
</html>
HTML-страница, созданная, как показано выше, имеет заголовок, включенный в тег <title>. Таблица стилей определяется в <style>. Не стесняйтесь настраивать их в соответствии с вашими предпочтениями.
В разделе <body> есть элемент <div>, который будет использоваться в качестве контейнера для диаграммы водопада. У него должен быть идентификатор, чтобы мы могли легко к нему обратиться позже. В этом случае его идентификатор установлен как WaterfallContainer.
Шаг 2. Ссылка на все необходимые библиотеки JavaScript
Во-вторых, нам нужно подключить все соответствующие JS-скрипты, которые будут использоваться для создания диаграммы водопада. URL-адреса помещаются в тег <script> внутри раздела <head>. Для этого урока я выбрал библиотеку построения графиков JavaScript AnyChart. Это мощный, гибкий и простой в использовании инструмент, позволяющий быстро отображать диаграммы на ваших веб-страницах. Однако процесс довольно универсален.
AnyChart является модульным, что означает, что вам не нужно загружать полную библиотеку, когда вам нужны только некоторые из ее диаграмм и функций. Чтобы создать диаграмму водопада, нам понадобится только модуль основной библиотеки, который требуется для всех типов диаграмм, и специальный модуль Водопад.
<!DOCTYPE html>
<html>
<head>
<title>Waterfall Chart Example</title>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-waterfall.min.js"></script>
<style>
html, body, #WaterfallContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
// Place the waterfall chart here.
</script>
</body>
</html>
Шаг 3. Загрузите набор данных, необходимый для визуализации в виде каскадной диаграммы.
Итак, чтобы показать вам красоту и предназначение диаграмм водопада, мне нужен набор данных, в котором на начальное значение влияет серия промежуточных значений, положительных и отрицательных.
Я решил посмотреть годовой отчет о прибылях и убытках Alphabet Inc. на 2020 год. Вот набор данных, который я подготовил для этого руководства по диаграмме водопада JS на его основе:
Теперь, когда у нас есть данные, давайте преобразуем их в массив объектов:
var data = [
{ x: 'Total Revenue', value: 182527 },
{ x: 'Cost of Revenue', value: -84732 },
{ x: 'Gross Profit', isTotal: true },
{ x: 'Operating Expenses', value: -56571 },
{ x: 'Operating Income', isTotal: true },
{ x: 'Interest Income', value: 8583 },
{ x: 'Other Expenses', value: -1725 },
{ x: 'Income Before Taxes', isTotal: true },
{ x: 'Provision for Taxes', value: -7813 },
{ x: 'Net Income', isTotal: true }
];
Если вы внимательно посмотрите на приведенный выше фрагмент, там есть ключевое слово isTotal. Он используется для отображения итогов, и в основном, когда вам нужно получить совокупное значение серии сложений и вычитаний, просто включите его со значением true. Правильно, вам даже не нужно ничего вычислять, поскольку библиотека делает это за вас на лету.
Шаг 4. Напишите код JS-диаграммы водопада
Пока все на месте, и мы буквально в одном шаге от визуализации диаграммы водопада. Имея всего несколько строк кода JavaScript, вы сможете проверить и даже интегрировать его где угодно для дальнейшей аналитики.
Все, что мы подготовили ранее, необходимо поместить в функцию anychart.onDocumentReady(), которая должна быть помещена в тег <script>, расположенный в разделе <body> нашей HTML-страницы.
<script>
anychart.onDocumentReady(function() {
// The entire JS code of the waterfall chart will be here.
});
</script>
Затем просто дайте команду создать диаграмму водопада и скормить ей набор данных, который мы сформировали на шаге 3:
var chart = anychart.waterfall(data);
Должны ли мы установить основной заголовок для нашей диаграммы?
chart.title('Income Statement for Alphabet Inc. (GOOGL), 2020');
В конце концов, давайте нарисуем получившуюся диаграмму водопада JS в контейнере, который мы установили на шаге 1:
// set the container id for the waterfall chart
chart.container('WaterfallContainer');
// draw the resulting chart
chart.draw();
Давайте посмотрим на результат ниже! Это базовая интерактивная водопадная диаграмма на основе JavaScript, визуализирующая отчет о доходах Google за 2020 год, которую мы только что создали с помощью всего нескольких строк кода.
Для вашего удобства ниже представлен полный код, и вы можете ознакомиться с ним на AnyChart Playground. Продолжайте читать, поскольку приближаются настройки!
<!DOCTYPE html>
<html>
<head>
<title>Waterfall Chart Example </title>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-waterfall.min.js"></script>
<style>
html, body, #WaterfallContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
anychart.onDocumentReady(function () {
// set the data
var data = [
{ x: 'Total Revenue', value: 182527 },
{ x: 'Cost of Revenue', value: -84732 },
{ x: 'Gross Profit', isTotal: true },
{ x: 'Operating Expenses', value: -56571 },
{ x: 'Operating Income', isTotal: true },
{ x: 'Interest Income', value: 8583 },
{ x: 'Other Expenses', value: -1725 },
{ x: 'Income Before Taxes', isTotal: true },
{ x: 'Provision for Taxes', value: -7813 },
{ x: 'Net Income', isTotal: true }
];
// create a waterfall chart with the data
var chart = anychart.waterfall(data);
// set the chart title
chart.title('Income Statement for Alphabet Inc. (GOOGL), 2020');
// set the container id for the waterfall chart
chart.container('WaterfallContainer');
// draw the resulting chart
chart.draw();
});
</script>
</body>
</html>
Настройка диаграммы водопада JS
Думаю, вы согласны с тем, что базовая диаграмма водопада JS, которую мы построили, уже выглядит хорошо. Но всегда есть что улучшить, не так ли?
Когда дело доходит до настройки, важно, чтобы используемая вами библиотека визуализации данных была достаточно гибкой, чтобы вы могли легко реализовать то, что хотите. Например, сейчас я покажу вам, как, приложив немного больше интуитивных усилий, мы можем сделать нашу диаграмму водопада более привлекательной и артистичной.
Работаем с топорами
Давайте начнем с добавления знака $ перед значениями, чтобы было абсолютно ясно, что суммы указаны в долларах США:
chart.yAxis().labels().format('${%Value}');Мы также можем добавить заголовок для оси Y, указав, что цифры указаны в миллионах:
chart.yAxis().title('Amount (in millions)');Метки по оси X (названия категорий) довольно длинные. Поставим их вертикально. Просто установите поворот метки по оси X следующим образом:
chart.xAxis().labels().rotation(-90);Посмотри, что у нас есть!
См. Эту настроенную диаграмму водопада JS на AnyChart Playground.
Стиль разъемов
Теперь давайте изменим соединительные элементы каскадной диаграммы - линии, проведенные между столбцами.
Используйте метод connectorStroke() для регулировки хода соединителей. Подробное описание параметров метода connectorStroke() можно найти в Справочнике по API.
chart.connectorStroke("#ff6666", 2, "2 2", "round");Посмотрите на результат ниже.
См. Эту настроенную диаграмму водопада JS с недавно разработанными коннекторами на AnyChart Playground.
Настройте метки столбцов водопада с помощью HTML
Может быть удобно настроить метки в формате HTML на диаграмме водопада. Чтобы включить HTML, просто установите параметр метода useHtml() как true. Затем просто добавьте необходимые HTML-теги, и они будут работать.
// enable HTML for the labels
chart.labels().useHtml(true);
// customize the labels
chart.labels().format(function() {
if (this.isTotal)
return "<span style="color: #dd2c00; font-weight: bold;">" +
this.absolute + "</span>";
return this.diff;
});
В соответствии с приведенной выше конфигурацией метод chart.labels().format() возвращает элемент <span> со специальным форматированием на основе HTML для меток столбцов, отображающих итоги.
Вы можете видеть, что подписи столбцов, которые указывают итоговые значения, были отформатированы жирными красными буквами.
См. Эту настроенную диаграмму водопада JS с метками в формате HTML на AnyChart Playground.
Изменение внешнего вида колонн водопада
Вместо того, чтобы использовать цвета по умолчанию, пришло время персонализировать внешний вид столбцов и сделать их элегантными, добавив немного великолепных цветов.
Чтобы изменить дизайн таким образом, нам нужна явно определенная серия. Итак, в этом случае мы создаем диаграмму водопада, затем настраиваем серию, а затем вводим данные:
// create a waterfall chart var chart = anychart.waterfall(); // create a series and set the data var series = chart.waterfall(data);
Внешний вид столбцов каскадной диаграммы можно настроить для трех различных состояний: normal(), hovered() и selected(). Чтобы изменить внешний вид столбцов, представляющих итоги, эти методы можно комбинировать с такими методами, как fill() для установки заливки, hatchFill() для установки штриховки и stroke() для установки обводки.
Используя тот же подход, мы можем настроить внешний вид падающих и восходящих столбцов, как показано ниже.
// configure the visual settings of the total columns
series.normal().fill("#ff6666", 0.3);
series.normal().hatchFill("forward-diagonal", "#ff6666", 0.5, 10);
series.normal().stroke("#ff6666");
series.hovered().fill("#ff6666", 0.1);
series.hovered().hatchFill("forward-diagonal", "#ff6666", 0.5, 10);
series.hovered().stroke("#ff6666", 2);
series.selected().fill("#ff6666", 0.5);
series.selected().hatchFill("forward-diagonal", "#ff6666", 0.5, 10);
series.selected().stroke("#ff6666", 4);
// configure the visual settings of the falling columns
series.normal().fallingFill("#00cc99", 0.3);
series.normal().fallingStroke("#00cc99", 1, "10 5", "round");
series.hovered().fallingFill("#00cc99", 0.1);
series.hovered().fallingStroke("#00cc99", 2, "10 5", "round");
series.selected().fallingFill("#00cc99", 0.5);
series.selected().fallingStroke("#00cc99", 4, "10 5", "round");
// configure the visual settings of the rising columns
series.normal().risingFill("#0066cc", 0.3);
series.normal().risingStroke("#0066cc");
series.hovered().risingFill("#0066cc", 0.1);
series.hovered().risingStroke("#0066cc", 2);
series.selected().risingFill("#0066cc", 0.5);
series.selected().risingStroke("#0066cc", 4);
Теперь диаграмма водопада выглядит восхитительно с такими мягкими цветами, не так ли? Внесите изменения в соответствии с вашими предпочтениями и сделайте окончательный результат еще более элегантным.
См. Эту окончательную настроенную диаграмму водопада JS на AnyChart Playground.
Итак, что нам говорит диаграмма водопада? Визуализация выше показывает, как общий доход Alphabet в размере 182,5 миллиарда долларов превращается в чистый доход в размере почти 40,3 миллиарда долларов, представляющий основные потоки доходов и расходов за 12 месяцев 2020 года. Не стесняйтесь исследовать и анализировать!
Заключение
Вместо того, чтобы читать и перебирать необработанные числа, не лучше ли использовать классную диаграмму водопада и получать ценные наблюдения без особых усилий?
Вы также можете визуализировать несколько серий. Просмотрите Документацию по диаграмме водопада и узнайте больше о том, что еще можно сделать и как.
Удачи в интерактивной визуализации данных, в виде диаграмм водопада и не только.
Мы рады поблагодарить Dilhani Withanage за написание этого потрясающего руководства по JS Waterfall Chart.
Первоначально опубликовано на https://www.anychart.com 16 марта 2021 г.
