Диаграммы Ганта

Обзор

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

Примечание. Диаграммы Ганта не работают в старых версиях Internet Explorer. (IE8 и более ранние версии не поддерживают SVG, который требуется для диаграмм Ганта.)

Простой пример 

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

    function daysToMilliseconds(days) {
      return days * 24 * 60 * 60 * 1000;
    }

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows([
        ['Research', 'Find sources',
         new Date(2015, 0, 1), new Date(2015, 0, 5), null,  100,  null],
        ['Write', 'Write paper',
         null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
        ['Cite', 'Create bibliography',
         null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
        ['Complete', 'Hand in paper',
         null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
        ['Outline', 'Outline paper',
         null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
      ]);

      var options = {
        height: 275
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="chart_div"></div>
</body>
</html>

Нет зависимостей

Чтобы создать диаграмму Ганта, не имеющую зависимостей, убедитесь, что для последнего значения для каждой строки в DataTable установлено null . 

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'Resource');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows([
        ['2014Spring', 'Spring 2014', 'spring',
         new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
        ['2014Summer', 'Summer 2014', 'summer',
         new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null],
        ['2014Autumn', 'Autumn 2014', 'autumn',
         new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null],
        ['2014Winter', 'Winter 2014', 'winter',
         new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null],
        ['2015Spring', 'Spring 2015', 'spring',
         new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null],
        ['2015Summer', 'Summer 2015', 'summer',
         new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null],
        ['2015Autumn', 'Autumn 2015', 'autumn',
         new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null],
        ['2015Winter', 'Winter 2015', 'winter',
         new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],
        ['Football', 'Football Season', 'sports',
         new Date(2014, 8, 4), new Date(2015, 1, 1), null, 100, null],
        ['Baseball', 'Baseball Season', 'sports',
         new Date(2015, 2, 31), new Date(2015, 9, 20), null, 14, null],
        ['Basketball', 'Basketball Season', 'sports',
         new Date(2014, 9, 28), new Date(2015, 5, 20), null, 86, null],
        ['Hockey', 'Hockey Season', 'sports',
         new Date(2014, 9, 8), new Date(2015, 5, 21), null, 89, null]
      ]);

      var options = {
        height: 400,
        gantt: {
          trackHeight: 30
        }
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="chart_div"></div>
</body>
</html>

Группировка ресурсов

Задачи, схожие по своей природе, можно группировать с помощью ресурсов. Добавьте к своим данным столбец string типа (после столбцов Task ID и Task Name ) и убедитесь, что все задачи, которые должны быть сгруппированы в ресурс, имеют одинаковый идентификатор ресурса. Ресурсы будут сгруппированы по цвету. 

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

    function daysToMilliseconds(days) {
      return days * 24 * 60 * 60 * 1000;
    }

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'Resource');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows([
        ['Research', 'Find sources', null,
         new Date(2015, 0, 1), new Date(2015, 0, 5), null,  100,  null],
        ['Write', 'Write paper', 'write',
         null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
        ['Cite', 'Create bibliography', 'write',
         null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
        ['Complete', 'Hand in paper', 'complete',
         null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
        ['Outline', 'Outline paper', 'write',
         null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
      ]);

      var options = {
        height: 275
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="chart_div"></div>
</body>
</html>

Вычисление начала/конца/длительности

Диаграммы Ганта принимают три значения, относящиеся к продолжительности задачи: дату начала, дату окончания и продолжительность (в миллисекундах). Если, например, дата начала отсутствует, диаграмма может рассчитать недостающее время на основе даты окончания и продолжительности. То же самое касается расчета даты окончания. Если указаны и дата начала, и дата окончания, продолжительность можно рассчитать между ними.

В таблице ниже показано, как Гантт обрабатывает наличие начала, конца и продолжительности в различных обстоятельствах.

Начинать Конец Продолжительность Результат
Подарок Подарок Подарок Убедитесь, что продолжительность соответствует времени начала и окончания. Выдает ошибку, если несовместимо.
Подарок Подарок Нулевой Вычисляет продолжительность от времени начала и окончания.
Подарок Нулевой Подарок Вычисляет время окончания.
Подарок Нулевой Нулевой Выдает ошибку, поскольку невозможно вычислить продолжительность или время окончания.
Нулевой Подарок Подарок Вычисляет время начала.
Нулевой Нулевой Подарок Вычисляет время начала на основе зависимостей. В сочетании с defaultStartDate позволяет рисовать диаграмму, используя только длительности.
Нулевой Подарок Нулевой Выдает ошибку, поскольку невозможно рассчитать время начала или продолжительность.
Нулевой Нулевой Нулевой Выдает ошибку, поскольку невозможно вычислить время начала, время окончания или продолжительность.

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

<html>
  <head>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
      google.charts.load("current", { packages: ["gantt"] });
      google.charts.setOnLoadCallback(drawChart);

      function toMilliseconds(minutes) {
        return minutes * 60 * 1000;
      }

      function drawChart() {
        var otherData = new google.visualization.DataTable();
        otherData.addColumn("string", "Task ID");
        otherData.addColumn("string", "Task Name");
        otherData.addColumn("string", "Resource");
        otherData.addColumn("date", "Start");
        otherData.addColumn("date", "End");
        otherData.addColumn("number", "Duration");
        otherData.addColumn("number", "Percent Complete");
        otherData.addColumn("string", "Dependencies");

        otherData.addRows([
          [
            "toTrain",
            "Walk to train stop",
            "walk",
            null,
            null,
            toMilliseconds(5),
            100,
            null,
          ],
          [
            "music",
            "Listen to music",
            "music",
            null,
            null,
            toMilliseconds(70),
            100,
            null,
          ],
          [
            "wait",
            "Wait for train",
            "wait",
            null,
            null,
            toMilliseconds(10),
            100,
            "toTrain",
          ],
          [
            "train",
            "Train ride",
            "train",
            null,
            null,
            toMilliseconds(45),
            75,
            "wait",
          ],
          [
            "toWork",
            "Walk to work",
            "walk",
            null,
            null,
            toMilliseconds(10),
            0,
            "train",
          ],
          [
            "work",
            "Sit down at desk",
            null,
            null,
            null,
            toMilliseconds(2),
            0,
            "toWork",
          ],
        ]);

        var options = {
          height: 275,
          gantt: {
            defaultStartDate: new Date(2015, 3, 28),
          },
        };

        var chart = new google.visualization.Gantt(
          document.getElementById("chart_div")
        );

        chart.draw(otherData, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

Критический путь

Критический путь на диаграмме Ганта — это путь или пути, которые напрямую влияют на дату окончания. Критический путь на диаграммах Ганта Google по умолчанию окрашен в красный цвет, и его можно настроить с помощью параметров criticalPathStyle . Вы также можете отключить критический путь, установив для параметра criticalPathEnabled значение false . 

        var options = {
          height: 275,
          gantt: {
            criticalPathEnabled: true,
            criticalPathStyle: {
              stroke: '#e64a19',
              strokeWidth: 5
            }
          }
        };

Стилизация стрелок

Вы можете стилизовать стрелки зависимостей между задачами с помощью параметров gantt.arrow : 

        var options = {
          height: 275,
          gantt: {
            criticalPathEnabled: false, // Critical path arrows will be the same as other arrows.
            arrow: {
              angle: 100,
              width: 5,
              color: 'green',
              radius: 0
            }
          }
        };

Стилизация треков

Стиль сетки обрабатывается комбинацией innerGridHorizLine , innerGridTrack и innerGridDarkTrack . Если установить только innerGridTrack , диаграмма будет рассчитывать более темный цвет для innerGridDarkTrack , но если установить только innerGridDarkTrack , innerGridTrack будет использовать цвет по умолчанию и не будет рассчитывать более светлый цвет. 

      var options = {
        height: 275,
        gantt: {
          criticalPathEnabled: false,
          innerGridHorizLine: {
            stroke: '#ffe0b2',
            strokeWidth: 2
          },
          innerGridTrack: {fill: '#fff3e0'},
          innerGridDarkTrack: {fill: '#ffcc80'}
        }
      };

Загрузка

Имя пакета google.charts.load — "gantt" .

  google.charts.load("current", {packages: ["gantt"]});

Имя класса визуализации — google.visualization.Gantt .

  var chart = new google.visualization.Gantt(container);

Формат данных

Строки: каждая строка в таблице представляет задачу.

Столбцы:

Столбец 0 Столбец 1 Столбец 2 Столбец 3 Столбец 4 Столбец 5 Столбец 6 Столбец 7
Цель: Идентификатор задачи Имя задачи Идентификатор ресурса (необязательно) Начинать Конец Продолжительность (в миллисекундах) Процент завершения Зависимости
Тип данных: нить нить нить дата дата число число нить
Роль: домен данные данные данные данные данные данные данные

Варианты конфигурации

Имя Тип По умолчанию Описание
фонЦвет.заливка нить 'белый' Цвет заливки диаграммы в виде цветовой строки HTML.
Гантт.Стрелка объект нулевой Для диаграмм Ганта gantt.arrow управляет различными свойствами стрелок, соединяющих задачи.
Gantt.arrow.angle число 45 Угол головки стрелы.
gant.arrow.color нить '#000' Цвет стрелок.
Gantt.arrow.length число 8 Длина головки стрелы.
gantt.arrow.radius число 15 Радиус для определения кривой стрелки между двумя задачами.
gantt.arrow.spaceAfter число 4 Количество пробелов между наконечником стрелки и задачей, на которую она указывает.
Gantt.arrow.width число 1,4 Ширина стрелок.
gantt.barCornerRadius число 2 Радиус для определения изгиба углов стержня.
gantt.barВысота число нулевой Высота полосок для задач.
gantt.criticalPathEnabled логическое значение истинный Если true все стрелки на критическом пути будут иметь другой стиль.
Gantt.criticalPathStyle объект нулевой Объект, содержащий стиль для всех стрелок критического пути.
gantt.criticalPathStyle.stroke нить нулевой Цвет стрелок критического пути.
gantt.criticalPathStyle.strokeWidth число 1,4 Толщина стрелок критического пути.
gantt.defaultStartDate дата/номер нулевой Если дату начала невозможно вычислить на основе значений в DataTable, в качестве даты начала будет установлено это значение. Принимает значение date ( new Date(YYYY, M, D) ) или число, обозначающее количество используемых миллисекунд.
gantt.innerGridHorizLine объект нулевой Определяет стиль внутренних горизонтальных линий сетки.
gantt.innerGridHorizLine.stroke нить нулевой Цвет внутренних горизонтальных линий сетки.
gantt.innerGridHorizLine.strokeWidth число 1 Ширина внутренних горизонтальных линий сетки.
gantt.innerGridTrack.fill нить нулевой Цвет заливки внутренней дорожки сетки. Если innerGridDarkTrack.fill не указан, он будет применен к каждой дорожке сетки.
gantt.innerGridDarkTrack.fill нить нулевой Цвет заливки альтернативной темной внутренней дорожки сетки.
gantt.labelMaxWidth число 300 Максимальный объем места, разрешенный для каждой метки задачи.
Gantt.labelStyle объект нулевой

Объект, содержащий стили меток задач.

labelStyle: {
  fontName: Roboto2,
  fontSize: 14,
  color: '#757575'
},
gantt.percentEnabled логическое значение истинный Заполняет панель задач в зависимости от процента выполнения задачи.
gantt.percentStyle.fill нить нулевой Цвет процента выполнения части панели задач.
gantt.shadowEnabled логическое значение истинный Если установлено значение true , рисуется тень под каждой панелью задач, которая имеет зависимости.
gantt.shadowColor нить '#000' Определяет цвет теней под любой панелью задач, которая имеет зависимости.
gantt.shadowOffset число 1 Определяет смещение (в пикселях) теней под любой панелью задач, которая имеет зависимости.
gantt.sortЗадачи логическое значение истинный Указывает, что задачи должны быть отсортированы топологически, если это правда; в противном случае используйте тот же порядок, что и соответствующие строки DataTable.
gantt.trackHeight число нулевой Высота дорожек.
ширина число ширина содержащего элемента Ширина диаграммы в пикселях.
высота число высота содержащего элемента высота диаграммы в пикселях.

Методы

Метод Описание
draw(data, options)

Рисует диаграмму. Диаграмма принимает дальнейшие вызовы методов только после запуска события ready . Extended description .

Тип возврата: нет
getSelection()

Возвращает массив выбранных объектов диаграммы. Выбираемыми объектами являются полосы, записи легенды и категории. Для этой диаграммы в любой момент времени можно выбрать только одну сущность. Extended description .

Тип возвращаемого значения: Массив элементов выбора.
setSelection()

Выбирает указанные объекты диаграммы. Отменяет любой предыдущий выбор. Выбираемыми объектами являются полосы, записи легенды и категории. Для этой диаграммы одновременно можно выбрать только одну сущность. Extended description .

Тип возврата: нет
clearChart()

Очищает диаграмму и освобождает все выделенные ей ресурсы.

Тип возврата: нет

События

Событие Описание
click

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

Свойства: targetID
error

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

Свойства: идентификатор, сообщение
ready

Диаграмма готова для вызовов внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вам следует настроить прослушиватель этого события до вызова метода draw и вызывать их только после того, как событие было запущено.

Свойства: нет
select

Запускается, когда пользователь щелкает визуальный объект. Чтобы узнать, что было выбрано, вызовите getSelection() .

Свойства: нет

Политика данных

Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.