Круговая диаграмма упаковки – это распространенный метод визуализации данных для представления иерархически организованных данных с помощью вложенных кругов. Из-за сходства с древовидной картой, в которой для той же цели используются вложенные прямоугольники, иногда ее называют круговой древовидной картой. Введенные в анализ данных американским математиком Уильямом Терстоном в 1985 году, упаковки кругов в значительной степени раскрывают иерархическую структуру данных.
Я хочу показать, как с помощью JavaScript можно легко построить элегантную интерактивную круглую упаковочную диаграмму! В этом пошаговом руководстве мы будем представлять 100 самых богатых людей мира в 2022 году по странам и отраслям согласно списку миллиардеров Forbes. Итак, соберитесь и приготовьтесь, так как ваш мозг станет немного богаче!
Круговая диаграмма упаковки, которая будет создана
Позвольте мне продемонстрировать, как будет выглядеть наша диаграмма упаковки кругов JavaScript, когда закончите. И это будет интерактив! После того, как вы закончите это руководство, вы сможете быстро визуализировать свои собственные данные в своей собственной круговой диаграмме упаковки.
Теперь приступим к изготовлению!
Базовая диаграмма упаковки кругов с JavaScript
Хотя это и не обязательно, предварительное знание HTML, CSS и JavaScript значительно облегчит понимание концепций. Однако, даже если вы абсолютный новичок, паниковать не стоит. К тому времени, когда мы закончим, вы научитесь самостоятельно составлять круговую диаграмму упаковки, поскольку мы подробно рассмотрим каждый шаг.
Любая диаграмма JavaScript, включая нашу диаграмму упаковки кругов, может быть создана в четыре основных шага:
- Подготовьте веб-страницу.
- Включите все необходимые файлы JS.
- Загрузите ваши данные.
- Напишите код для построения диаграмм на JavaScript.
Давайте рассмотрим эти шаги более подробно, чтобы подготовить удивительную интерактивную диаграмму упаковки кругов на основе JS.
1. Подготовьте веб-страницу
Прежде всего, нам нужно место для схемы упаковки кругов.
Создайте веб-страницу, если у вас ее еще нет. Там создайте контейнер для графика, добавив элемент блока HTML с уникальным идентификатором. Кроме того, укажите некоторые правила CSS для этого элемента, чтобы определить, как должна отображаться диаграмма.
Вот как выглядит моя HTML-страница:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Circle Packing Chart in JavaScript</title>
<style type="text/css">
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
В моем примере блочный элемент — <div>. Его идентификатор container. Свойства width и height установлены на 100%, а margin и padding установлены на 0, что приведет к тому, что диаграмма упаковки кругов будет отображаться на всей странице; но вы можете определить все, что считаете нужным в вашей ситуации.
2. Включите все необходимые файлы JS
Далее нам нужно, чтобы все необходимые файлы JavaScript были указаны в разделе <head>.
Когда вы используете правильный инструмент визуализации данных, создание круговой диаграммы упаковки не будет таким сложным или трудоемким, как могло бы быть. Для этого урока я решил использовать AnyChart JS Charts. Это одна из немногих библиотек для построения диаграмм JavaScript, которая поддерживает диаграммы упаковки кругов из коробки и удобна для начинающих, поскольку предлагает массу примеров, готовых к использованию, и имеет тщательную документацию.
Для добавления необходимых файлов JavaScript у нас есть два варианта: загрузить их локально или использовать их из сети доставки контента (CDN). Остановимся на втором. Добавьте скрипты Core и Circle Packing для построения диаграмм. Кроме того, если вы собираетесь визуализировать данные из файла, как я в этом случае, включите модуль Адаптер данных, чтобы облегчить загрузку данных. Сам JS-код будет помещен в тег <script> в секции <body> (как вариант, его можно настроить в секции <head>).
Вот посмотрите на мою текущую HTML-страницу:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Circle Packing Chart in JavaScript</title>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-circle-packing.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-data-adapter.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// The JS Circle Packing Chart’s code will be written here.
</script>
</body>
</html>
3. Загрузите свои данные
Теперь пришло время добавить данные.
Я хочу визуализировать данные из рейтинга самых богатых людей Forbes Forbes Billionaires 2022, который включает информацию об их собственном капитале, странах, источниках богатства и отраслях. Я уже взял данные из приведенной выше ссылки о 100 самых богатых из них и сохранил их в JSON-файле. (Не стесняйтесь использовать другие поддерживаемые форматы данных, просто убедитесь, что способ установки данных соответствует инструкциям по данным для круглых упаковочных диаграмм.)
Чтобы правильно загрузить данные, будьте готовы использовать функцию anychart.data.loadJsonFile(). Так:
anychart.data.loadJsonFile('https://gist.githubusercontent.com/awanshrestha/ff3ae5c08238b1f4f950f022aaad2f6f/raw/3766915befaeea7a32f3d41fdc2ece110e7543d7/circle-packing-chart.json');
Теперь осталось всего несколько строк кода JavaScript, чтобы завершить диаграмму упаковки кругов!
4. Напишите код для построения диаграмм на JavaScript
Наконец, нам нужен код JavaScript для создания диаграммы упаковки кругов.
Добавьте функцию anychart.onDocumentReady(), которая будет включать в себя весь JS-код графика. Это гарантирует, что код не запустится, пока страница не будет полностью загружена.
<script>
anychart.onDocumentReady(function () {
// The JS Circle Packing Chart's code will be written here.
</script>
Загрузите файл данных JSON, как показано на шаге 3, и добавьте данные.
<script>
anychart.onDocumentReady(function () {
// load a json data file
anychart.data.loadJsonFile('https://gist.githubusercontent.com/awanshrestha/ff3ae5c08238b1f4f950f022aaad2f6f/raw/3766915befaeea7a32f3d41fdc2ece110e7543d7/circle-packing-chart.json',
function(data) {
// add the data
var treeData = anychart.data.tree(data, 'as-table');
}
);
});
</script>
Используйте функцию circlePacking(), чтобы создать экземпляр круговой диаграммы упаковки, передав в нее набор данных.
// create a circle packing chart instance var chart = anychart.circlePacking(treeData);
Наконец, дайте диаграмме название, поместите ее в ранее указанный контейнер и отобразите с помощью команды draw().
// add a chart title
chart.title("Forbes Top 100 Richest people");
// specify the container element id
chart.container('container')
// initiate the drawing of the chart
chart.draw();
Тада! Схема упаковки кругов на основе JavaScript готова!
Вы можете найти интерактивную версию этой простой диаграммы упаковки кругов JavaScript на диаграмме AnyChart Playground вместе с исходным кодом. Не стесняйтесь экспериментировать с ним.
Я также помещу полный код диаграммы упаковки круга ниже для вашего удобства.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Circle Packing Chart in JavaScript</title>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-circle-packing.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-data-adapter.min.js"></script>
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
// load a json data file
anychart.data.loadJsonFile('https://gist.githubusercontent.com/awanshrestha/ff3ae5c08238b1f4f950f022aaad2f6f/raw/3766915befaeea7a32f3d41fdc2ece110e7543d7/circle-packing-chart.json',
function(data) {
// add the data
var treeData = anychart.data.tree(data, 'as-table');
// create a circle packing chart instance
var chart = anychart.circlePacking(treeData);
// add a chart title
chart.title("Forbes Top 100 Richest people");
// specify the container element id
chart.container('container');
// initiate the drawing of the chart
chart.draw();
}
);
});
</script>
</body>
</html>
Мы можем сразу сделать вывод из диаграммы упаковки кругов, что большинство крупнейших миллиардеров из Соединенных Штатов, за которыми следует Китай. Аналогично этому, мы также можем получить представление об отраслях, а также о суммах собственного капитала.
Тем не менее, это только базовая версия диаграммы упаковки кругов JS. Графику можно дополнительно настроить, чтобы она выглядела намного лучше (по-прежнему без особых хлопот)
Усовершенствованная диаграмма упаковки кругов с JavaScript
Диаграмма упаковки кругов, созданная с помощью JS, уже выглядит приятной для глаз. Но иногда приличия недостаточно. Кроме того, в некоторых случаях вам может потребоваться настроить внешний вид и функциональность диаграммы.
К счастью, вы можете легко настроить таблицы упаковки кругов в соответствии со своими потребностями и вкусами. Теперь я продемонстрирую некоторые быстрые настройки, которые вы также можете сделать для улучшения визуализации:
А. Настройте всплывающую подсказку.
Б. Настроить внешний вид.
C. Настройте заголовок.
D. Настройте метки.
А. Настройте всплывающую подсказку
Когда мы наводим курсор на круги, отображаются значения чистой стоимости. Давайте настроим всплывающую подсказку, чтобы она содержала больше информации.
chart
.tooltip()
.useHtml(true)
.format(function () {
var src = this.item.get('industry');
if (src) {
return '<div>'
+ '<span>Name: ' + this.name + '</span><br/>'
+ '<span>Net worth in billions USD:' + this.value + '</span><br/>'
+ '<span>Source: ' + this.item.get('source') + '</span>'
+ '</div>'
}
return '<span>Total net worth: ' + this.value.toFixed(2) + ' billion USD</span>';
});
Теперь мы можем ясно видеть имена, собственный капитал и источники богатства для кругов миллиардеров, а также общую стоимость собственного капитала для групп отраслей и стран.
Б. Настроить внешний вид
Цвет фона диаграммы по умолчанию белый. Давайте изменим его на серый. Это легко сделать с помощью функции background().
Давайте также немного увеличим толщину границ кругов, используя функцию stroke().
// customize the background
chart.background('#f6f6f6');
// customize the stroke
chart
.stroke(function () {
return {
thickness: 1,
};
});
// customize the stroke in the hovered state
chart
.hovered()
.stroke(function () {
return {
thickness: 2,
};
});
Интерактивная версия этой упаковки кругов JS доступна на AnyChart Playground. Меняйте цвета по своему усмотрению.
C. Настройте заголовок
Название диаграммы можно легко улучшить. Следуйте за мной, поскольку я просто включаю HTML и изменяю цвет, размер и вес шрифта:
chart
.title()
.enabled(true)
.useHtml(true)
.text(
'<span style = "color: #112B3C; font-weight: 600; font-size: 18px;">100 Richest People, According to Forbes</span>'
);
Вот как выглядит график упаковки кругов после улучшения заголовка:
D. Настройте ярлыки
На данный момент названия стран отображаются в формате по умолчанию. Давайте настроим их так, чтобы они выглядели внутри блоков более элегантно:
chart
.labels()
.fontSize('14')
.fontColor('#696969')
.textShadow('none')
.anchor('center-top').offsetY('-3%');
chart.labels()
.background()
.enabled(true)
.fill("#f6f6f6 0.8")
.stroke("#888888")
.corners(5);
Круглая схема упаковки теперь выглядит очень стильно и красиво. Почему бы и нет? В конце концов, он используется для визуализации людей с состоянием в миллиарды!
Полный исходный код окончательной диаграммы упаковки кругов JavaScript доступен ниже, а также на Игровой площадке AnyChart.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Circle Packing Chart in JavaScript</title>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-circle-packing.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-data-adapter.min.js"></script>
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
// load a json data file
anychart.data.loadJsonFile('https://gist.githubusercontent.com/awanshrestha/ff3ae5c08238b1f4f950f022aaad2f6f/raw/3766915befaeea7a32f3d41fdc2ece110e7543d7/circle-packing-chart.json',
function(data) {
// add the data
var treeData = anychart.data.tree(data, 'as-table');
// create a circle packing chart instance
var chart = anychart.circlePacking(treeData);
// customize the tooltip
chart
.tooltip()
.useHtml(true)
.format(function () {
var src = this.item.get('industry');
if (src) {
return '<div>'
+ '<span>Name: ' + this.name + '</span> <br/>'
+ '<span>Net worth in Billions: ' + this.value + '</span> <br/>'
+ '<span>Source: ' + this.item.get('source') + '</span>'
+ '</div>'
}
return '<span>' + this.value.toFixed(2) + ' Billion Dollars </span>';
);
// add a chart title
chart
.title()
.enabled(true)
.useHtml(true)
.text(
'<span style = "color: #112B3C;font-weight:600;font-size:18px;">Forbes Top 100 Richest People</span>'
);
// customize the appearance
chart.background('#f6f6f6');
chart
.hovered()
.stroke(function () {
return {
thickness: 2,
};
});
chart
stroke(function () {
return {
thickness: 1,
};
});
// customize the labels (country names)
chart
.labels()
.fontSize('14')
.fontColor('#696969')
.textShadow('none')
.anchor('center-top').offsetY('-3%');
chart.labels()
.background()
.enabled(true)
.fill("#f6f6f6 0.8")
.stroke("#888888")
.corners(5);
// specify the container element id
chart.container('container');
// initiate the drawing of the chart
chart.draw();
}
);
});
</body>
</script>
</html>
Заключение
Фантастика! Наша диаграмма упаковки кругов JavaScript была построена. И это был простой процесс, верно? Теперь приступайте и создайте свою собственную визуализацию диаграммы упаковки кругов на JavaScript! Документация по круглой диаграмме упаковки и примеры круглой упаковочной схемы к вашим услугам для дальнейших инструкций и вдохновения соответственно.
Кроме того, доступно множество дополнительных типов диаграмм, и не бойтесь смотреть на них. Вы будете поражены тем, что можете легко создавать их на JS!
Наконец, пожалуйста, не стесняйтесь задавать вопросы или вносить предложения. И я с нетерпением жду, когда вы создадите диаграммы упаковки кругов JavaScript!
Мы благодарны Авану Шресте за этот замечательный учебник по диаграмме упаковки кругов!
Не пропустите наши Руководства по построению диаграмм JavaScript для других типов диаграмм.
Готовы написать такой классный гостевой пост для нашего блога? Пожалуйста, свяжитесь с нами, чтобы рассказать нам о своих идеях!
Первоначально опубликовано на www.anychart.com 8 сентября 2022 г.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord. Заинтересованы в Взлом роста? Ознакомьтесь с разделом Схема.
