Узнайте, что такое диаграмма с накоплением и как легко создавать диаграммы с накоплением различных типов с помощью JS с визуализацией количества медалей в Пекине-2022.

Визуализация данных — навык, жизненно необходимый аналитикам и разработчикам в наше время. Диаграммы с накоплением — один из наиболее широко используемых типов диаграмм, и теперь я хочу рассказать вам, что это такое и как с легкостью построить такую ​​графику с помощью JavaScript. В основной учебной части я буду создавать различные версии диаграммы с накоплением, предоставляя подробные пошаговые инструкции, которые помогут вам быстро освоиться. Мои визуализации предложат взглянуть на количество медалей в 10 лучших странах в итоговой таблице лидеров зимних Олимпийских игр 2022 года в Пекине, чтобы вы также повеселились, следуя за ними.

Что такое диаграмма с накоплением?

Диаграмма с накоплением — это разновидность гистограммы, столбчатой ​​диаграммы или диаграммы с областями, которая позволяет взглянуть на состав общих значений для обогащения сравнений (или отслеживания во времени) при визуальном анализе данных.

Диаграммы с накоплением эффективны, когда вам нужно графически агрегировать части (изменяющегося) целого.

Типы диаграмм с накоплением

Существует два основных типа диаграмм с накоплением: на основе значений и на основе процентов.

Диаграмма с накоплением значений — или просто диаграмма с накоплением — представляет итоги по категориям, предлагая общее представление о составе по сериям, все в абсолютных значениях. Такие графики полезны для сравнения итогов по нескольким категориям и в то же время для понимания роли каждой серии в различиях, выявленных при быстром визуальном анализе.

Диаграмма с накоплением в процентах — иногда также называемая диаграммой со стопроцентным накоплением — визуализирует проценты вместо абсолютных значений. Он представляет итоги по категориям как 100%, а отдельные точки данных в ряду - как пропорции по отношению к целому. Такие графики идеально подходят для наблюдения за тем, как меняется вклад определенного ряда от категории к категории, когда не учитываются сами абсолютные суммы.

В зависимости от исходной, базовой формы визуализации ряда такой график может называться столбчатая диаграмма с накоплением, столбчатая диаграмма с накоплением или диаграмма с накоплением с областями — или, соответственно, столбчатая диаграмма с накоплением. », столбчатая диаграмма с процентным накоплением или диаграмма с областями с процентным накоплением.

Не пропустите, например, замечательную статью о столбчатых диаграммах с накоплением в журнале Smashing Magazine, чтобы получить более полное представление о том, как работает этот тип диаграммы с накоплением и как его следует использовать правильно.

Пример диаграммы с накоплением, который будет построен

Теперь пришло время для самого урока! Я объясню, как создать крутую интерактивную диаграмму с накоплением без хлопот с помощью JavaScript.

Первая диаграмма с накоплением, которая будет построена в этом руководстве, — это интерактивная столбчатая диаграмма с накоплением. После этого я покажу вам, как настроить его в нескольких строках кода. Наконец, вы узнаете, как преобразовать столбчатую диаграмму с накоплением в столбчатую диаграмму с процентным накоплением и в столбчатую диаграмму с накоплением, что также будет очень просто.

Все еще находясь под впечатлением от прошлогодних Зимних Олимпийских игр 2022 года в Пекине, я решил посмотреть на 10 стран с наибольшим количеством олимпийских медалей, визуализируя, сколько всего медалей — а также золотых, серебряных и бронзовых — их спортсмены увезли домой.

Взгляните на окончательную диаграмму с накоплением на основе JavaScript, которую я получу к концу этого урока!

Создание диаграммы с накоплением JavaScript

Впечатляющую диаграмму с накоплением JS можно построить всего за 4 простых шага.

  • Создайте базовую HTML-страницу.
  • Включите необходимые файлы JS.
  • Добавьте данные.
  • Напишите необходимый код JavaScript.

1. Создайте базовую HTML-страницу

Перво-наперво. Я создаю базовую HTML-страницу. Чтобы определить место, куда я хочу поместить диаграмму с накоплением, которую я создам, я включаю блочный элемент (<div>) и даю ему идентификатор («контейнер»), чтобы легко ссылаться на этот <div> позже в коде.

<html>
  <head>
    <title>JavaScript Stacked Chart</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>

Затем я устанавливаю ширину и высоту элемента контейнера на 100 %, чтобы отображать диаграмму с накоплением по всей веб-странице. Само собой разумеется, что вы можете настроить эти параметры по своему вкусу.

2. Включите необходимые файлы JavaScript

Далее мне нужно сослаться на все сценарии, которые будут использоваться для создания моей диаграммы с накоплением. Я сделаю это в разделе <head> только что созданной HTML-страницы.

В этом уроке я использую AnyChart. Это легкая библиотека диаграмм JS (HTML5) с множеством вариантов типов диаграмм, включая диаграммы с накоплением, и того, что вы хотите получить от их внешнего вида. И он может хорошо подойти новичкам в разработке визуализации данных для Интернета из-за тщательной документации и множества готовых к использованию примеров диаграмм.

AnyChart имеет модульную систему, которая позволяет минимизировать объем кода JavaScript, выполняемого на вашей веб-странице, путем подключения только тех типов диаграмм и функций, которые вы действительно будете использовать, а не всей библиотеки. Для построения составной диаграммы буквально любого декартова типа достаточно базового модуля. Позвольте мне получить его из CDN (в качестве альтернативы, конечно, вы можете скачать его, если хотите).

<html>
  <head>
    <title>JavaScript Stacked Chart</title>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-base.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>
      // All the code for the JS stacked chart will come here.
    </script>
  </body>
</html>

3. Добавьте данные

Возьмем данные о медалях по странам из Таблицы олимпийских медалей, доступной на официальном сайте Зимних Олимпийских игр 2022 года в Пекине. Так как эти данные несложные и ограниченные, я буду напрямую добавлять их в код в виде массива массивов. (Конечно, к вашим услугам и множество других способов загрузки данных.) Числовые значения, идущие после названия страны, будут означать количество завоеванных медалей — золота, серебра и бронзы соответственно.

let data = anychart.data.set([
  ['Norway',16,8,13],
  ['ROC',6,12,14],
  ['Germany',12,10,5],
  ['Canada',4,8,14],
  ['USA',8,10,7],
  ['Sweden',8,5,5],
  ['Austria',7,7,4],
  ['Japan',3,6,9],
  ['Netherlands',8,5,4],
  ['Italy',2,7,8]
]);

Все готово для составления диаграммы с накоплением на основе JS, так как теперь у нас есть веб-страница, сценарии и данные. Теперь пришло время для главного события, так что будьте готовы добавить код JavaScript для визуализации!

4. Напишите необходимый код JavaScript

Прежде чем делать что-либо еще, я добавляю закрывающую функцию, гарантирующую, что код JS внутри нее запускается только после того, как страница будет готова.

anychart.onDocumentReady(function () {
  // Everything else goes here. 
});

Столбчатую диаграмму с накоплением на основе JavaScript создать довольно просто, и поверьте мне, это всего лишь несколько строк понятного кода!

Поскольку я демонстрирую три разных типа медалей, мне нужно три серии, каждая из которых представляет золотые, серебряные и бронзовые медали. Во-первых, я сопоставляю данные для каждой серии.

// map the data for the first series
let firstSeriesData = dataSet.mapAs({ x: 0, value: 1 });
// map the data for the second series
let secondSeriesData = dataSet.mapAs({ x: 0, value: 2 });
// map the data for the second series
let thirdSeriesData = dataSet.mapAs({ x: 0, value: 3 });

Затем я создаю экземпляр гистограммы и указываю, что хочу сложить значения по шкале Y.

// create a column chart instance
let chart = anychart.column();
// stack values on y scale.
chart.yScale().stackMode('value');

Затем я создаю все три серии с сопоставленными данными.

// store series
let series;
// create the first series with the mapped data
series = chart.column(firstSeriesData);
// create the second series with the mapped data
series = chart.column(secondSeriesData);
// create the third series with the mapped data
series = chart.column(thirdSeriesData);

Наконец, я даю название диаграмме, задаю идентификатор контейнера (запомните его с первого шага — именно там он нужен) и рисую получившуюся диаграмму с накоплением.

// set the chart title
chart.title("Winter Olympics 2022 Medal Tally");
// set the container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();

Готово! Полнофункциональная JS-диаграмма с набором столбцов готова!

Это был простой процесс создания красивой диаграммы с накоплением JavaScript в один миг, не так ли? И теперь вы можете с первого взгляда увидеть, как европейские страны доминируют в гонке за олимпийские медали, и можете углубиться в другие детали для анализа.

Эта базовая версия составной диаграммы с полным кодом JS/CSS/HTML доступна на AnyChart Playground.

На самом деле, полученная визуализация мне уже кажется хорошей. Но позвольте мне показать вам, как вы можете настроить эту диаграмму с накоплением, если она вам когда-нибудь понадобится.

Настройка диаграммы с накоплением

После того, как вы создали базовую диаграмму с накоплением JavaScript, настроить ее стало еще проще. Вот некоторые возможные настройки, которые вы, возможно, захотите сделать.

1. Название серии

Составная диаграмма содержит три серии, обозначающие отдельные типы медалей. Но почему кто-то должен угадывать, кто где?

Чтобы избежать путаницы, я хочу назвать каждую серию в соответствии с типом медали, которую она представляет. Тогда эти имена будут указаны во всплывающей подсказке, появляющейся при наведении курсора мыши на соответствующую серию — вместо бессмысленных «Серия 0», «Серия 1» и «Серия 2».

Итак, я создаю функцию, которая принимает серию и имя в качестве параметров и задает имя серии на основе полученного значения. Затем я просто передаю серию и название этой серии для каждой серии.

// a function to set the series names
let setupSeries = function (series, name) {
  series.name(name);
};
// create the first series with the mapped data
series = chart.column(firstSeriesData);
setupSeries(series, "Gold");
                  
// create the second series with the mapped data
series = chart.column(secondSeriesData);
setupSeries(series, "Silver");
// create the third series with the mapped data
series = chart.column(thirdSeriesData);
setupSeries(series, "Bronze");

2. Цветовая палитра

Действительно эффективный способ сделать диаграмму более впечатляющей и персонализированной, а также выделить что-то в данных — использовать соответствующие цвета. В моей диаграмме с накоплением JS я могу просто выбрать цвета для каждой серии в соответствии с типом медали.

Для этого я добавляю параметр color в функцию, созданную на предыдущем шаге, и передаю соответствующий цвет для каждой серии — чтобы она выглядела как золотая, серебряная или бронзовая соответственно. При наведении я позволил ему превратиться в более темный оттенок того же цвета.

// a function to configure label, padding, and color settings for all series
let setupSeries = function (series, name, color, hoveredColor) {
  series.name(name).stroke("2 #fff 1").fill(color);
  series.hovered().stroke("1 #fff 1").fill(hoveredColor);
};
…
// create the first series with the mapped data
series = chart.column(firstSeriesData);
setupSeries(series, "Gold", "#f9cd0e", "#dfb80c");
// create the second series with the mapped data
series = chart.column(secondSeriesData);
setupSeries(series, "Silver", "#afb7c0", "#9aa0a6");
// create the third series with the mapped data
series = chart.column(thirdSeriesData);
setupSeries(series, "Bronze", "#cc8469", "#ae7058");

Теперь он стал намного более интуитивным. Вы можете быстро понять, какая страна выиграла, сколько медалей каждого типа. Например, я сразу вижу, что норвежские спортсмены увезли домой не только больше всего медалей, но и больше всего золотых.

3. Легенда

Для моей текущей диаграммы с накоплением цвета довольно очевидны. Тем не менее, я покажу вам, как добавить легенду, которая точно указывает, что представляет каждый цвет.

На самом деле, это очень просто, так как вы можете просто включить легенду, и она появится автоматически. Я также хочу указать размер шрифта легенды и добавить немного верхнего отступа. Но это может быть всего лишь одна простая строка кода.

chart.legend().enabled(true).fontSize(16).padding([10, 0, 0, 0]);

3. Повышение титула

Чтобы сделать это более заметным, я добавляю немного форматирования в заголовок стековой диаграммы. Я увеличиваю размер шрифта, делаю его темнее и устанавливаю больший отступ.

chart.title().fontSize(20).fontColor("#2b2b2b").padding([5, 0, 0, 0]);

Посмотрите, как прекрасно выглядит эта расширенная версия гистограммы с накоплением на основе JS! Здесь — полный код со всеми последними изменениями.

4. Улучшение всплывающей подсказки

Я считаю, что всплывающая подсказка — отличный способ поделиться дополнительной информацией с читателем. В этом примере составной диаграммы JavaScript я добавлю во всплывающую подсказку общее количество медалей, выигранных каждой страной, вместе с типами медалей.

Перед этим я хочу убедиться, что единая всплывающая подсказка — одна для всех серий — появляется при наведении курсора мыши на любую часть столбца. Этого можно добиться с помощью режима отображения всплывающей подсказки «объединение».

chart.tooltip().displayMode("union");

Теперь я форматирую заголовок диаграммы с накоплением, чтобы она отображала общее количество медалей вместе с названием соответствующей страны. Для этого я создаю функцию и добавляю значения количества медалей для каждого типа.

chart.tooltip().titleFormat(function(e){
  return this.x + ' - ' + this.points[0].getStat('categoryYSum');
});

Теперь всплывающая подсказка стала намного более интуитивной и информативной!

Вы можете найти полный код для этой диаграммы с накоплением JavaScript здесь.

Итак, это крутая интерактивная столбчатая диаграмма с накоплением, созданная с помощью JS. А как насчет других типов диаграмм с накоплением? В качестве бонуса я также покажу вам, как легко сделать два других варианта: столбчатую диаграмму с процентным накоплением и столбчатую диаграмму с накоплением.

5. Столбчатая диаграмма с процентным накоплением

Когда вам нужно сосредоточиться на композиции, а не на итогах, диаграмма с процентным накоплением приходит на помощь. С помощью этой техники визуализации данных все внимание обращено на проценты.

Чтобы превратить столбчатую диаграмму с накоплением на основе значений в диаграмму с накоплением на основе процентов, все, что вам нужно, это заменить «значение» на «процент» при указании режима наложения. Так легко!

chart.yScale().stackMode("percent");

Ознакомьтесь с кодом для этой столбчатой ​​диаграммы с процентным накоплением JavaScript здесь.

6. Столбчатая диаграмма с накоплением

Если вам нравятся горизонтальные столбцы больше, чем вертикальные — или, например, если имена серий слишком длинные и плохо подходят друг другу — вы можете создать столбчатую диаграмму с накоплением вместо гистограммы с накоплением. Ну, это тоже далеко от ракетостроения и может быть сделано точно так же.

Сейчас я везде меняю column на bar.

let chart = anychart.bar();
…
series = chart.bar(firstSeriesData);
…
series = chart.bar(secondSeriesData);
…
series = chart.bar(thirdSeriesData);

Полученная интерактивная линейчатая диаграмма с накоплением JavaScript — это окончательная визуализация моего руководства по диаграммам с накоплением JS! Вы можете поиграть с кодом этой версии на AnyChart Playground и добавить свой код на свой веб-сайт или в приложение.

Заключение

Как видите, быстро создать и настроить диаграмму с накоплением JS очень просто. Действительно, процесс не требует слишком много технических знаний или опыта. Пожалуйста, свяжитесь с нами, если у вас есть какие-либо вопросы.

Теперь вы хотите увидеть, как легко можно построить другие типы диаграмм? Ознакомьтесь с серией Руководства по построению диаграмм JavaScript, многие из которых также были созданы мной!

Олимпийские игры всегда вдохновляют. На самом деле проще создать отличные интерактивные визуализации данных, чем выиграть такие первоклассные медали. Так что вперед и выигрывайте с красивыми и информативными диаграммами и информационными панелями!

Мы благодарны Шачи Свадиа, внештатному разработчику визуализации данных, за написание этой замечательной статьи о диаграммах с накоплением.

Есть идея для гостевого поста? Будем рады услышать от вас об этом!

Не пропустите наши другие Руководства по построению диаграмм JavaScript

Первоначально опубликовано на https://www.anychart.com 12 апреля 2022 г.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.