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

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

В этом руководстве по диаграмме JS Pareto мы визуализируем статистику основных причин смерти в Соединенных Штатах в 2019 году и выясним, что унесло больше всего жизней американцев в течение этого года, согласно официальным данным.

Теперь перейдем к построению диаграмм на JavaScript, а точнее, к созданию интерактивной диаграммы Парето с использованием JS!

Построение базовой диаграммы Парето в JS

Обычный порядок визуализации данных в диаграммах JavaScript основан на следующих четырех шагах. Чтобы создать диаграмму Парето на JS, вы тоже должны следовать им:

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

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

Шаг 1. Создайте HTML-страницу

Следующий код создает HTML-страницу с контейнером для нашей диаграммы Парето.

<!DOCTYPE html>
<html>
  <head>
    <title>Pareto Chart Example</title>
    <style>
      html, body, #container1 {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container1"></div>
      // The Pareto chart code will be put here.
  </body>
</html>

Разработанная выше HTML-страница состоит из двух основных разделов: <head> и <body>. Раздел <head> включает два подраздела: <title> и <style>. Заголовок страницы задается здесь как «Пример диаграммы Парето». Элемент <style> используется для применения простой таблицы стилей к HTML-документу, разделу <body> и контейнеру <div> с идентификатором 'container1' (именно там мы разместим нашу диаграмму Парето).

Шаг 2. Подключите скрипты

Затем мы должны связать все скрипты, которые будут использоваться при построении диаграммы Парето - в разделе <head>.

Существует множество библиотек диаграмм JavaScript, которые вы можете выбрать для создания интерактивной диаграммы Парето для своего веб-сайта или приложения. В этом уроке я буду использовать AnyChart. Это очень гибкая библиотека JavaScript для кроссплатформенной визуализации данных, обогащенная огромным количеством демонстраций диаграмм, а также обширной и чрезвычайно подробной документацией и справочником по API, что делает ее достаточно простой в использовании даже для новичков. веб-разработка и программирование.

AnyChart имеет модульную систему, которая позволяет минимизировать объем JavaScript, который необходимо запускать на вашей странице, поскольку вам не нужно загружать больше, чем вам действительно нужно. Для разработки диаграммы Парето вам понадобятся всего два модуля: core со всеми основами библиотеки диаграмм JS и pareto, в частности, с типом диаграммы Парето.

<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-pareto.min.js"></script>

Теперь давайте добавим эти модули в раздел <head>, как показано ниже.

<!DOCTYPE html>
<html>
  <head>
    <title>Pareto 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-pareto.min.js"></script>
    <style>
      html, body, #container1 {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container1"></div>
    <script>
      // The Pareto chart code will be put here.
    </script>    
  </body>
</html>

Шаг 3. Загрузите данные, которые хотите визуализировать.

Для этого учебника по диаграмме Парето в JavaScript я решил воспользоваться статистикой CDC, раскрывающей десять основных причин смерти в Соединенных Штатах Америки в 2019 году. Известно, что всего было зарегистрировано 2 854 838 смертей жителей. На десять ведущих причин смерти пришлось 73,4% всех смертей. Диаграмма Парето покажет десять основных причин смерти и вклад каждой из них в их общее количество в порядке убывания.

Итак, давайте сначала посмотрим на набор данных.

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

Чтобы сгенерировать объект JavaScript с нашими данными, нам нужны два поля данных с именами «x» и «значение» в соответствии со следующим:

  • «X» - это название фактора, который должен отображаться на диаграмме Парето (в нашем случае, название причины смерти), и
  • «Значение» - это частота соответствующего фактора (в нашем случае количество смертей от этой причины).

Вот как это может выглядеть с нашими данными:

var data = [
  {x: 'Heart disease', value: 659041},
  {x: 'Alzheimer disease', value: 150005},
  {x: 'Cancer', value: 599601},
  {x: 'Accidents', value: 173040},
  {x: 'Kidney disease', value: 51567},
  {x: 'Suicide', value: 47511},
  {x: 'CLRD', value: 156979},
  {x: 'Stroke', value: 121499},
  {x: 'Diabetes', value: 87647},
  {x: 'Influenza and pneumonia', value: 49783}
];

Шаг 4. Написание кода диаграммы Парето на JS

К настоящему времени мы получили все фундаментальные вещи для создания интерактивной диаграммы Парето с использованием JavaScript. Итак, давайте сопоставим все, что нам нужно для достижения нашей цели.

Все коды JavaScript должны быть помещены внутри тега <script>. Более того, как показано в следующем фрагменте, мы пишем строки кода JS, связанные с диаграммой Парето, в функции onDocumentReady. Эта функция ожидает полной загрузки HTML-страницы.

<script>
  anychart.onDocumentReady(function() {
    // The entire code of the Pareto chart will be here.
  });
</script>

Итак, в функции onDocumentReady загрузите данные, как описано в шаге 3.

После создания объекта данных подайте его на диаграмму Парето.

// create a pareto chart
var chart = anychart.pareto();
// feed the data into the chart
chart.data(data);

Затем установите заголовок основной диаграммы Парето и добавьте два заголовка оси Y, как показано ниже, чтобы было понятно, где что находится:

// set the chart title
chart.title('Number of Deaths for 10 Leading Causes of Death in U.S. in 2019');
// set the measure y axis title
chart.yAxis(0).title('Number of deaths');
// set the cumulative percentage y axis title
chart.yAxis(1).title('Cumulative percentage');

Последнее действие - передать получившуюся диаграмму Парето в подразделение с идентификатором «container1» и предоставить команду для рисования графики в соответствии с заданной конфигурацией:

// set the chart container id
chart.container('container1');
// draw the chart
chart.draw();

Ух ты! Вот как в итоге выглядит наша диаграмма Парето, созданная с помощью JavaScript. Он интерактивный и отзывчивый!

См. эту базовую диаграмму Парето на AnyChart Playground.)

Полный код интерактивной диаграммы Парето JS / HTML5 приведен ниже:

<!DOCTYPE html>
<html>
  <head>
    <title>Pareto 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-pareto.min.js"></script>
    <style>
      html, body, #container1 {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <script>
anychart.onDocumentReady(function () {
  // set data
  var data = [
    {x: 'Heart disease', value: 659041},
    {x: 'Alzheimer disease', value: 150005},
    {x: 'Cancer', value: 599601},
    {x: 'Accidents', value: 173040},
    {x: 'Kidney disease', value: 51567},
    {x: 'Suicide', value: 47511},
    {x: 'CLRD', value: 156979},
    {x: 'Stroke', value: 121499},
    {x: 'Diabetes', value: 87647},
    {x: 'Influenza and pneumonia', value: 49783}
  ];
  // create a pareto chart
  var chart = anychart.pareto();
  // feed the data into the chart
  chart.data(data);
  // set the chart title
  chart.title('Number of Deaths for 10 Leading Causes of Death in U.S. in 2019');
  // set the measure y axis title
  chart.yAxis(0).title('Number of deaths');
  // set the cumulative percentage y axis title
  chart.yAxis(1).title('Cumulative percentage');
  // set the chart container id
  chart.container('container1');
  // draw the chart
  chart.draw();
});
    </script>
  </body>
</html>

Настройка диаграммы Парето в JavaScript

Вам нужно сделать диаграмму удобнее, красивее, читабельнее или упаковать ее дополнительными деталями? У вас есть много возможностей сделать это с помощью AnyChart JS API. Вы также можете выполнить множество визуальных и функциональных изменений для диаграммы Парето. (Подробнее см. Документацию по диаграмме Парето.)

Для большего вдохновения вы можете заглянуть в галерею AnyChart с примерами диаграмм Парето.

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

Использование палитр для изменения цвета диаграммы Парето

Вы хотите изменить голубой цвет диаграммы Парето по умолчанию в соответствии с вашими предпочтениями? Если да, то есть очень удобный способ - палитры для авто раскраски!

В библиотеке диаграмм AnyChart JS доступно множество предопределенных цветовых палитр, и использовать их очень просто. Применим, например, Землю:

// use one of the pre-built palettes for coloring
chart.palette(anychart.palettes.earth);

Ниже представлена ​​недавно окрашенная диаграмма Парето.

См. на AnyChart Playground.

Цвета земных тонов успокаивающие и естественные, поэтому мне это нравится. Выбирайте сами, ребята. Или создайте собственную цветовую палитру с нуля, если хотите.

Отформатируйте ряд столбцов и строк Парето

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

Мы можем использовать различные встроенные методы для изменения внешнего вида точек данных. По сути, есть три состояния: нормальное, наведение и выбрано. Метод normal() используется для установки внешнего вида точек в нормальном состоянии, т.е. когда с точкой ничего не происходит. Метод hovered() предназначен для определения внешнего вида в состоянии наведения, то есть при наведении курсора на точку. Наконец, метод selected() управляет внешним видом точек при щелчке (выборе).

Эти три метода можно комбинировать с методами fill(), hatchFill() и stroke(). Метод fill() используется для заливки точек заданным цветом. Метод hatchFill() - заполнить точки полосами. Наконец, stroke() должен изменить внешний вид контура точек.

Давайте сначала изменим все это для ряда столбцов Парето:

// configure the visual settings of the first (column) series
chart.getSeries(0).normal().fill("#c98411", 0.3);
chart.getSeries(0).hovered().fill("#c98411", 0.1);
chart.getSeries(0).selected().fill("#c98411", 0.5);
chart.getSeries(0).normal().hatchFill("forward-diagonal", "#c98411", 1, 15);
chart.getSeries(0).hovered().hatchFill("forward-diagonal", "#c98411", 1, 15);
chart.getSeries(0).selected().hatchFill("forward-diagonal", "#c98411", 1, 15);
chart.getSeries(0).normal().stroke("#c98411");
chart.getSeries(0).hovered().stroke("#c98411", 2);
chart.getSeries(0).selected().stroke("#c98411", 4);

Затем давайте настроим серию строк:

// configure the visual settings of the second (line) series
chart.getSeries(1).normal().stroke("#991e00", 4, "4 4", "round");

Приведенный выше код изменяет контур серии строк в нормальном состоянии.

Интерактивная диаграмма Парето с этими новыми изменениями показана ниже. Не выглядит ли визуализация еще интереснее?

См. на AnyChart Playground.

Настроить всплывающую подсказку диаграммы Парето

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

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

Сначала мы получаем доступ к серии столбцов и даем команду всплывающей подсказке отображать текст «Значение:» перед фактическими значениями.

// configure the pareto column series tooltip format
var column = chart.getSeriesAt(0);
column.tooltip().format('Value: {%Value}');

Во-вторых, мы получаем доступ к ряду строк и добавляем текст «Суммарная частота:» перед совокупными процентами, а также настраиваем отображение значений относительной частоты таким же образом. Символ «\ n» используется для переноса строки.

// configure the pareto line series tooltip format
var line = chart.getSeriesAt(1);
line
  .tooltip()
  .format('Cumulative Frequency: {%CF}% \n Relative Frequency: {%RF}%');

Посмотрите, как теперь выглядит наша диаграмма Парето в JavaScript, когда всплывающие подсказки были таким образом улучшены.

См. на AnyChart Playground.

Установите метки диаграммы Парето

Было бы полезно сделать диаграмму Парето более информативной с первого взгляда, отображая совокупный процент каждого фактора (в нашем случае причины смерти) в верхней части линейного ряда рядом с каждой точкой данных. Посмотри на это:

// set the pareto line series labels
var line = chart.getSeriesAt(1);
line.labels().enabled(true).anchor('right-bottom').format('{%CF}%');

Я объясню это очень быстро.

Ряд линий диаграммы Парето может быть получен с помощью chart.getSeriesAt(1), как мы обсуждали ранее. Как только мы его получили, мы включаем метки объекта линейной серии. Для этого необходимо установить метод labels().enabled() с параметром true.

Функция anchor() используется, чтобы указать, где должны отображаться метки.

Наконец, мы используем метод format() для настройки формата отображения меток.

Ниже представлена ​​новая интерактивная диаграмма Парето JS, теперь с метками процентной информации.

См. на AnyChart Playground.

Включить перекрестие диаграммы Парето

Перекрестие - это горизонтальные и вертикальные линии, перпендикулярные друг другу, которые следуют за указателем мыши. Они позволяют легко увидеть точные значения в любой точке данных. Давайте включим это для нашей диаграммы Парето:

// add and configure the crosshair
chart.crosshair().enabled(true).xLabel(false);

Вы можете видеть, что параметр метода xLabel установлен как false. Таким образом, метка перекрестия на оси X отображаться не будет.

Ниже показано, как выглядит диаграмма Парето с перекрестием.

См. на AnyChart Playground.

Это последняя интерактивная диаграмма Парето в JavaScript в этом руководстве. Выглядит здорово, не правда ли?

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

Непреднамеренные травмы привели к 173 040 смертельным случаям и стали третьей по значимости причиной.

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

Заключение

Как прошло создание интерактивной диаграммы Парето с помощью JS? Легко, правда? На самом деле нам просто нужно было создать базовую HTML-страницу, сослаться на необходимые сценарии JavaScript, загрузить набор данных и написать некоторый код в соответствии с четкими инструкциями в документации в зависимости от того, что именно мы хотели от такой визуализации данных. AnyChart API справлялся практически со всем и делал все безупречно.

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

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

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