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

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

Паралимпийские игры Токио-2020 не за горами. Итак, я решил визуализировать их спортивную программу по месту проведения. Следуя этому пошаговому руководству, вы узнаете, как создать классную диаграмму Ганта для ресурсов JavaScript, визуализирующую расписание Паралимпийских игр Токио 2020!

Предварительный просмотр диаграммы Ганта для ресурсов JS

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

Создание диаграммы Ганта для ресурсов с помощью JavaScript

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

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

Первым шагом является создание пустой HTML-страницы и добавление элемента <div> для хранения диаграммы ресурсов. Этому блочному элементу присваивается уникальный идентификатор, который будет использоваться для дальнейшего использования.

Ширина и высота <div> установлены на 100% для отображения диаграммы на всем экране, но это можно изменить в соответствии с требованиями.

<html>
  <head>
    <title>JavaScript Resource Gantt 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>

2. Включите необходимые скрипты

Следующим шагом является привязка необходимых JS-скриптов для создания нужной нам диаграммы.

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

Итак, я буду ссылаться на соответствующие файлы. Для моей диаграммы ресурсов JS мне нужно добавить модули AnyChart Core и Gantt, а также модуль Data Adapter, который позволит мне загружать данные простым способом. Помните, что файлы сценариев включены в раздел <head> веб-страницы.

<html>
  <head>
    <title>JavaScript Resource Gantt Chart</title>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-gantt.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.10.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 code for the JS resource chart will be placed here.
    </script>
  </body>
</html>

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

AnyChart поддерживает несколько способов загрузки данных в диаграммы, такие как CSV, JSON, Google Sheets и т. Д. Здесь я использую JSON.

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

Загрузка данных JSON из файла:

anychart.data.loadJsonFile("https://gist.githubusercontent.com/shacheeswadia/21da3da501982400b8ca35690b17ea5a/raw/d17e3774c6db1502b5d95677a5656ecc43f24526/resourceChartData.json", function (data) {})

4. Напишите код для построения диаграммы.

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

Прежде всего, я помещаю весь код в функцию anychart.onDocumentReady(), чтобы обеспечить полную загрузку страницы перед выполнением кода. Затем данные загружаются с помощью функции anychart.data.loadJsonFile(). Диаграмма Ганта по ресурсам требует данных в древовидном формате. Это делается путем создания дерева данных. После этого создается экземпляр диаграммы и устанавливаются данные для диаграммы. Чтобы элементы полосы помещались на экране, указана функция fitAll.

// create a data tree
var treeData = anychart.data.tree(data, "as-tree");
// create a resource gantt chart
var chart = anychart.ganttResource();
// set the data
chart.data(treeData);
// fit the elements to the width of the timeline
chart.fitAll();

Следующая вещь является абсолютно необязательной, но в этом случае она сделает визуализацию еще более аккуратной и милой:

// set the position of the splitter to match the first column
chart.dataGrid().fixedColumns(true);

Заключительные шаги - это установка идентификатора контейнера на ранее объявленную <div> ссылку и рисование результирующей диаграммы Ганта ресурсов на основе JS.

// set the container id
chart.container("container");
// draw the chart
chart.draw();

Разве это не невероятно? Функциональная, красивая, интерактивная диаграмма Ганта для ресурсов JavaScript построена всего за несколько строк кода!

Взгляните на эту первоначальную версию с кодом HTML, CSS и JS на AnyChart Playground.

Полный исходный код этой таблицы ресурсов на всякий случай также приведен ниже:

<html>
  <head>
    <title>JavaScript Resource Ganntt Chart</title>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-gantt.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.10.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 () {
anychart.data.loadJsonFile("https://gist.githubusercontent.com/shacheeswadia/21da3da501982400b8ca35690b17ea5a/raw/d17e3774c6db1502b5d95677a5656ecc43f24526/resourceChartData.json", function (data) {
  // create a data tree
  var treeData = anychart.data.tree(data, "as-tree");
  // create a resource chart
  var chart = anychart.ganttResource(); 
    
  // set the data
  chart.data(treeData);
  // fit the elements to the width of the timeline
  chart.fitAll();
    
  // set the position of the splitter to match the first column
  chart.dataGrid().fixedColumns(true);
    
  // set the container id
  chart.container("container");
  // draw the chart
  chart.draw();
    
});
});
    </script>
  </body>
</html>

Настройка диаграммы Ганта для ресурсов JS

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

A. Добавьте заголовок

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

// enable and configure the chart title
var title = chart.title();
title.enabled(true);
title
  .text("Tokyo Paralympic 2020 Schedule")
  .fontSize(18)
  .fontWeight(600)
  .fontColor("#b32e3c")
  .padding(10);

Б. Измените цвета полос

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

// customize the color of the bars
var elements = chart.getTimeline().elements();
elements.normal().fill("#e96a7b 0.75");
elements.normal().stroke("#db4e50");C. Adjust the height of the rows

C. Отрегулируйте высоту рядов

Так же, как простая модификация для улучшения уже имеющейся диаграммы Ганта ресурсов на основе JavaScript, я увеличиваю высоту строки для каждой строки данных, а также для заголовка.

// set the row height
chart.defaultRowHeight(25);
// set the header height
chart.headerHeight(95);

Ознакомьтесь с новой версией интерактивной диаграммы Ганта для ресурсов JS прямо ниже! Он доступен на AnyChart Playground.

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

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

// enable html for the data grid tooltip
chart.dataGrid().tooltip().useHtml(true);
// configure the tooltips of the timeline
chart.getTimeline().tooltip().useHtml(true);
chart.getTimeline().tooltip().title(false);
chart.getTimeline().tooltip().separator(false);
chart.getTimeline().tooltip().format(function(e){
  var depth = e.item.meta('depth');
  var tooltipText;
  // when hovering a venue row
  // show the number of sports in the venue
  if (depth==0){ 
    tooltipText = e.item.numChildren() + " Sports in the venue.";
  } else {    
    if (typeof e.period === 'undefined') {
      // when hovering an event row
      // show the sport and the number of events
      var events = e.item.get('periods').length;
      tooltipText = "<span style='font-weight:600;font-size:12px'>" + events + " " + e.name + " event(s).</span>";          
    } else {
 // when hovering an event bar
 // show the start and end of the event
 start = anychart.format.dateTime(e.start, "dd MMM");
 end = anychart.format.dateTime(e.end, "dd MMM");
    
 tooltipText = "<span style='font-weight:600;font-size:12px'>" +
 start + "-" + end + " </span>";          
    }               
  }
  return tooltipText;
});
chart.dataGrid().tooltip().format(function(e){
  // different tooltips for venues and sports
  // in the data grid
  var depth = e.item.meta('depth');
  var tooltipText;
// the number of sports for venues
  if (depth==0){ 
    tooltipText = e.item.numChildren() + " Sports in the venue.";
  } else {
    // the number of events for sports
    tooltipText = "<span style='font-weight:600;font-size:12px'>" +
    e.name + ": " + e.item.get("periods").length + " event(s) in the  venue. </span>" 
  }     
  return tooltipText;
});

E. Измените ширину столбца

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

// disable the first data grid column
chart.dataGrid().column(0).enabled(false);
// set the width of the labels column
chart.dataGrid().column(1).width(285);

F. Добавьте файл локали для получения японских текстов

Действительно крутая персонализация - это локализация текста даты и времени на японский язык, поскольку летние Паралимпийские игры 2020 года проводятся в Японии. Я делаю это, во-первых, добавляя файл сценария в раздел <head> и, во-вторых, устанавливая формат языкового стандарта вывода на японский. Локализация диаграммы Ганта Easy JS Resource в действии:

<script src="https://cdn.anychart.com/releases/8.10.0/locales/ja-jp.js"></script>
…
// set the japanese locale
anychart.format.outputLocale('ja-jp');

G. Отформатируйте этикетки

И последнее в этом уроке. Чтобы улучшить внешний вид таблицы ресурсов и ее удобочитаемость, я выделил метки мест проведения полужирным шрифтом с помощью HTML.

// set the text of the first data grid column
var column_1 = chart.dataGrid().column(1);
column_1.labels()
  .useHtml(true);
// format labels depending on whether it is a venue or a sport
column_1.labels().format(function(e) {
  // decision based on a depth in hierarchy
  var depth = e.item.meta('depth');
  var style = (depth==0)?'bold':'400';
  return "<span style='font-size:12px;font-weight:" + style + "'>" +  e.name + " </span>";
});

Посмотрите, насколько крута финальная версия интерактивной диаграммы Ганта для ресурсов JS! Ознакомьтесь со всем кодом и поиграйте с ним на AnyChart Playground.

Заключение

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

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

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

Мы в AnyChart благодарим Shachee Swadia, внештатного дизайнера данных, за создание этого замечательного руководства по диаграмме Ганта для ресурсов JS для нашего блога.

Дайте нам знать, если вы хотите сделать отличный гостевой пост.

Посмотрите другие руководства по построению диаграмм JavaScript в нашем блоге.

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

Больше контента на plainenglish.io