Диаграмма Ганта — это тип диаграммы, которая иллюстрирует разбивку проекта на составляющие его задачи. Диаграммы 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 позволяет рисовать диаграмму, используя только длительности.
Нулевой
Подарок
Нулевой
Выдает ошибку, поскольку невозможно рассчитать время начала или продолжительность.
Нулевой
Нулевой
Нулевой
Выдает ошибку, поскольку невозможно рассчитать время начала, время окончания или продолжительность.
Имея в виду вышеизложенное, вы можете создать диаграмму, отображающую типичную поездку на работу, используя только продолжительность каждой задачи.
Критический путь на диаграмме Ганта — это путь или пути, которые напрямую влияют на дату окончания. Критический путь в диаграммах Google Ганта по умолчанию окрашен в красный цвет, и его можно настроить с помощью параметров criticalPathStyle . Вы также можете отключить критический путь, задав для параметраcriticPathEnabled criticalPathEnabledfalse .
Вы можете стилизовать стрелки зависимости между задачами с помощью параметров 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 , но при установке только innerGridDarkTrackinnerGridTrack будет использовать цвет по умолчанию и не будет рассчитывать более светлый цвет.
Имя класса визуализации — google.visualization.Gantt .
var chart = new google.visualization.Gantt(container);
Формат данных
Строки: Каждая строка в таблице представляет задачу.
Столбцы:
Столбец 0
Колонка 1
Колонка 2
Колонка 3
Колонка 4
Колонка 5
Колонка 6
Колонка 7
Цель:
Идентификатор задачи
Название задачи
Идентификатор ресурса (необязательно)
Начинать
Конец
Продолжительность (в миллисекундах)
Процент завершения
Зависимости
Тип данных:
нить
нить
нить
свидание
свидание
количество
количество
нить
Роль:
домен
данные
данные
данные
данные
данные
данные
данные
Варианты конфигурации
Имя
Тип
По умолчанию
Описание
backgroundColor.fill
нить
'белый'
Цвет заливки диаграммы в виде строки цвета HTML.
стрелка Ганта
объект
нулевой
Для диаграмм Гантаgantt.arrow управляет различными свойствами стрелок, соединяющих задачи.
Ганта.стрелка.угол
количество
45
Угол наконечника стрелы.
Ганта.стрелка.цвет
нить
'#000'
Цвет стрелок.
Ганта.стрелка.длина
количество
8
Длина наконечника стрелы.
Ганта.стрелка.радиус
количество
15
Радиус для определения кривой стрелки между двумя задачами.
gantt.arrow.spaceПосле
количество
4
Количество пробелов между наконечником стрелки и задачей, на которую она указывает.
Ганта.стрелка.ширина
количество
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.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() .
Свойства: нет
Политика данных
Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.