Обзор
Временная шкала — это диаграмма, на которой показано, как набор ресурсов используется с течением времени. Если вы управляете программным проектом и хотите проиллюстрировать, кто, что и когда делает, или если вы организуете конференцию и вам нужно запланировать переговорные комнаты, временная шкала часто является разумным выбором для визуализации. Одним из популярных типов временной шкалы является диаграмма Ганта .
Примечание. В объектах JavaScript Date месяцы индексируются, начиная с нуля и заканчивая одиннадцатью, при этом январь — это месяц 0, а декабрь — месяц 11. Если ваша временная шкала кажется отклоняющейся на месяц, скорее всего, именно поэтому. Дополнительную информацию см. на странице «Даты и время» .
Простой пример
Допустим, вы хотите построить заговор, когда американские президенты отбывали свой срок. Здесь «ресурсами» являются президенты, и мы можем изобразить срок полномочий каждого президента в виде полосы:
При наведении курсора на панель появляется всплывающая подсказка с более подробной информацией.
После загрузки пакета timeline и определения обратного вызова для рисования диаграммы при отображении страницы метод drawChart() создает экземпляр google.visualization.Timeline() , а затем заполняет dataTable одной строкой для каждого президента.
Внутри dataTable первый столбец — это имя президента, а второй и третий столбцы — время начала и окончания. Они имеют тип Date JavaScript, но могут также быть простыми числами.
Наконец, мы вызываем метод диаграммы draw() , который отображает ее внутри div с тем же идентификатором ( timeline ), который использовался при объявлении container в первой строке метода drawChart() .
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
chart.draw(dataTable);
}
</script>
</head>
<body>
<div id="timeline" style="height: 180px;"></div>
</body>
</html>
Временные шкалы Google Charts можно настраивать, и в следующих примерах мы покажем вам некоторые распространенные способы настройки внешнего вида ваших временных шкал.
Маркировка полосок
Помимо меток строк («Вашингтон», «Адамс», «Джефферсон» выше) вы можете пометить отдельные столбцы. Здесь мы меняем метки строк на простые числа и размещаем имя каждого президента на его панели.
В этом коде мы вставили в наши данные новый столбец для хранения меток столбцов: полное имя каждого президента. Если в dataTable временной шкалы имеется четыре столбца, первый интерпретируется как метка строки, второй — как метка панели, а третий и четвертый — как начало и конец.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example2.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Term' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ '2', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ '3', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
chart.draw(dataTable);
}
</script>
<div id="example2.1" style="height: 200px;"></div>
Наши новые метки строк, приведенные выше, не очень информативны, поэтому давайте удалим их с помощью опции showRowLabels на временной шкале.
По умолчанию showRowLabels имеет true . Установка значения false удаляет метки строк:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example2.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Term' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ '2', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ '3', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
var options = {
timeline: { showRowLabels: false }
};
chart.draw(dataTable, options);
}
</script>
<div id="example2.2" style="height: 180px;"></div>
Расширенный пример
Чтобы усложнить нашу временную шкалу, давайте добавим в нашу диаграмму вице-президентов и государственных секретарей. Джон Адамс был вице-президентом до того, как стал президентом, а Томас Джефферсон был государственным секретарем, затем вице-президентом и, наконец, президентом.
На временной шкале ресурс будет иметь один и тот же цвет, даже если он отображается в нескольких строках, поэтому на следующей диаграмме каждый человек представлен одинаковым цветом.
Некоторые госсекретари проработали очень короткое время, поэтому эта диаграмма является хорошей проверкой навешивания ярлыков. Если метка слишком велика для панели, она сокращается или удаляется в зависимости от размера панели. Пользователи всегда могут навести курсор на панель, чтобы получить подсказку.
На временной шкале строки будут располагаться по порядку — президент поверх вице-президента поверх государственного секретаря — потому что именно в этом порядке они появляются в приведенном ниже коде. Однако расположение столбцов определяется исключительно временем начала и окончания, поэтому замена двух государственных секретарей или двух президентов в dataTable не влияет на диаграмму.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example3.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Position' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
[ 'Vice President', 'John Adams', new Date(1789, 3, 21), new Date(1797, 2, 4)],
[ 'Vice President', 'Thomas Jefferson', new Date(1797, 2, 4), new Date(1801, 2, 4)],
[ 'Vice President', 'Aaron Burr', new Date(1801, 2, 4), new Date(1805, 2, 4)],
[ 'Vice President', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)],
[ 'Secretary of State', 'John Jay', new Date(1789, 8, 25), new Date(1790, 2, 22)],
[ 'Secretary of State', 'Thomas Jefferson', new Date(1790, 2, 22), new Date(1793, 11, 31)],
[ 'Secretary of State', 'Edmund Randolph', new Date(1794, 0, 2), new Date(1795, 7, 20)],
[ 'Secretary of State', 'Timothy Pickering', new Date(1795, 7, 20), new Date(1800, 4, 12)],
[ 'Secretary of State', 'Charles Lee', new Date(1800, 4, 13), new Date(1800, 5, 5)],
[ 'Secretary of State', 'John Marshall', new Date(1800, 5, 13), new Date(1801, 2, 4)],
[ 'Secretary of State', 'Levi Lincoln', new Date(1801, 2, 5), new Date(1801, 4, 1)],
[ 'Secretary of State', 'James Madison', new Date(1801, 4, 2), new Date(1809, 2, 3)]
]);
chart.draw(dataTable);
}
</script>
<div id="example3.1" style="height: 200px;"></div>
Укладываем бруски в один ряд
В отличие от пап , в США одновременно может быть только один президент, поэтому, если мы пометим все наши строки как «Президент», временная шкала объединит три строки нашей первой диаграммы в одну для более четкого представления. Вы можете контролировать это поведение с помощью параметра groupByRowLabel .
Вот поведение по умолчанию:
Теперь давайте установим для groupByRowLabel значение false и разделим одну строку на три:
Код для отключения группировки:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example4.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
var options = {
timeline: { groupByRowLabel: false }
};
chart.draw(dataTable, options);
}
</script>
<div id="example4.2" style="height: 200px;"></div>
Управление цветами
По умолчанию Google Charts выбирает цвета, оптимизированные с учетом эстетики и читабельности (включая пользователей с ограниченными возможностями зрения). Вы можете настроить поведение по умолчанию с помощью параметров colorByRowLabel , singleColor , backgroundColor и colors .
Опция colorByRowLabel окрашивает все столбцы в одной строке одинаково. Это может быть хорошим выбором, если между полосами есть промежутки.
По умолчанию для colorByRowLabel установлено значение false , поэтому здесь мы переопределяем это значение и устанавливаем значение true .
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'Beginning JavaScript', new Date(0,0,0,12,0,0), new Date(0,0,0,13,30,0) ],
[ 'Magnolia Room', 'Intermediate JavaScript', new Date(0,0,0,14,0,0), new Date(0,0,0,15,30,0) ],
[ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,0,0), new Date(0,0,0,17,30,0) ],
[ 'Willow Room', 'Beginning Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Willow Room', 'Intermediate Google Charts', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Willow Room', 'Advanced Google Charts', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ]]);
var options = {
timeline: { colorByRowLabel: true }
};
chart.draw(dataTable, options);
}
</script>
<div id="example5.1" style="height: 100px;"></div>
Если вы хотите, чтобы все столбцы были одинакового цвета независимо от того, в какой строке они находятся, используйте опцию singleColor :
В приведенном ниже коде для singleColor установлено шестнадцатеричное значение, чтобы окрасить все столбцы в светло-зеленый цвет:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'CSS Fundamentals', new Date(0,0,0,12,0,0), new Date(0,0,0,14,0,0) ],
[ 'Magnolia Room', 'Intro JavaScript', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
[ 'Gladiolus Room', 'Intermediate Perl', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Gladiolus Room', 'Advanced Perl', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Gladiolus Room', 'Applied Perl', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
[ 'Petunia Room', 'Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Petunia Room', 'Closure', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Petunia Room', 'App Engine', new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);
var options = {
timeline: { singleColor: '#8d8' },
};
chart.draw(dataTable, options);
}
</script>
<div id="example5.2" style="height: 150px;"></div>
Вы можете управлять цветом фона строк с помощью опции backgroundColor :
backgroundColor указывается как шестнадцатеричное значение. Здесь мы соединяем его с colorByRowLabel , чтобы показывать треки в конференции:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.3');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'CSS Fundamentals', new Date(0,0,0,12,0,0), new Date(0,0,0,14,0,0) ],
[ 'Magnolia Room', 'Intro JavaScript', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
[ 'Gladiolus Room', 'Intermediate Perl', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Gladiolus Room', 'Advanced Perl', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Gladiolus Room', 'Applied Perl', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
[ 'Petunia Room', 'Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Petunia Room', 'Closure', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Petunia Room', 'App Engine', new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);
var options = {
timeline: { colorByRowLabel: true },
backgroundColor: '#ffd'
};
chart.draw(dataTable, options);
}
</script>
<div id="example5.3" style="height: 150px;"></div>
Затем, чтобы установить чередующийся или нечередующийся цвет фона по индексу строки, используйте опцию alternatingRowStyle (активна v51+):
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.4');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'CSS Fundamentals', new Date(0,0,0,12,0,0), new Date(0,0,0,14,0,0) ],
[ 'Magnolia Room', 'Intro JavaScript', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
[ 'Gladiolus Room', 'Intermediate Perl', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Gladiolus Room', 'Advanced Perl', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Gladiolus Room', 'Applied Perl', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
[ 'Petunia Room', 'Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Petunia Room', 'Closure', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Petunia Room', 'App Engine', new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);
var options = {
timeline: { colorByRowLabel: true },
alternatingRowStyle: false
};
chart.draw(dataTable, options);
}
</script>
<div id="example5.4" style="height: 150px;"></div>
Если вы хотите контролировать цвета отдельных столбцов, используйте опцию colors :
colors принимает массив шестнадцатеричных значений, которые применяются к столбцам по порядку:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.5');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
var options = {
colors: ['#cbb69d', '#603913', '#c69c6e'],
};
chart.draw(dataTable, options);
}
</script>
<div id="example5.5" style="height: 150px;"></div>
Если для вашей диаграммы требуется больше цветов, чем указано в списке, она будет вести себя так, как будто для singleColor установлен первый цвет в списке. (Это справедливо для всех диаграмм Google, а не только для временных шкал.)
Другой способ управления цветами отдельных столбцов — использование столбца с ролью стиля .
Код для добавления и заполнения столбца стиля:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.6');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'string', id: 'style', role: 'style' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'President', 'George Washington', '#cbb69d', new Date(1789, 3, 30), new Date(1797, 2, 4)],
[ 'President', 'John Adams', '#603913', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'President', 'Thomas Jefferson', '#c69c6e', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
chart.draw(dataTable);
}
</script>
<div id="example5.6" style="height: 150px;"></div>
Изменение шрифтов
Вы можете выбрать шрифт и шрифт для меток каждой строки с помощью rowLabelStyle , а для меток на каждой полосе — с помощью barLabelStyle . Оба продемонстрированы ниже.
Примечание. Обязательно выбирайте шрифты, которые браузеры ваших пользователей смогут отображать.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example6.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Washington', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'Adams', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'Jefferson', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
var options = {
colors: ['#cbb69d', '#603913', '#c69c6e'],
timeline: { rowLabelStyle: {fontName: 'Helvetica', fontSize: 24, color: '#603913' },
barLabelStyle: { fontName: 'Garamond', fontSize: 14 } }
};
chart.draw(dataTable, options);
}
</script>
<div id="example6.1" style="height: 200px;"></div>
Вы не можете установить цвет текста barLabel .
Перекрывающиеся линии сетки
Google Charts вносит небольшие изменения в конечные точки полос, чтобы не закрывать линии сетки временной шкалы. Чтобы предотвратить такое поведение, установите для параметра avoidOverlappingGridLines значение false .
Чтобы проиллюстрировать эффект, приведем два примера: первый с перекрывающейся линией сетки, а второй — без.
Вот код, который перекрывает линии сетки:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example7.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'Google Charts', new Date(0,0,0,14,0,0), new Date(0,0,0,15,0,0)],
[ 'Magnolia Room', 'App Engine', new Date(0,0,0,15,0,0), new Date(0,0,0,16,0,0)]]);
var options = {
timeline: { showRowLabels: false },
avoidOverlappingGridLines: false
};
chart.draw(dataTable, options);
}
</script>
<div id="example7.1" style="height: 200px;"></div>
Настройка подсказок
Вы можете настроить то, что видят пользователи, когда они наводят курсор на полосы временной шкалы, добавив столбец подсказки в таблицу данных из пяти столбцов. Чтобы предоставить всплывающие подсказки не по умолчанию, каждая строка вашей таблицы данных должна иметь все пять столбцов (метка строки, метка панели, всплывающая подсказка, начало и конец):
При наведении курсора на панель появляется всплывающая подсказка с текстом, определенным в третьем столбце. На этой диаграмме нам нужно установить для второго столбца фиктивные значения (здесь 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':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline-tooltip');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'string', id: 'dummy bar label' });
dataTable.addColumn({ type: 'string', role: 'tooltip' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Washington', null, 'George', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
[ 'Adams', null, 'John', new Date(1797, 2, 3), new Date(1801, 2, 3) ],
[ 'Jefferson', null, 'Thomas', new Date(1801, 2, 3), new Date(1809, 2, 3) ]]);
chart.draw(dataTable);
}
</script>
</head>
<body>
<div id="timeline-tooltip" style="height: 180px;"></div>
</body>
</html>
Загрузка
Имя пакета google.charts.load — timeline :
google.charts.load("current", {packages: ["timeline"]});
Имя класса визуализации — google.visualization.Timeline :
var visualization = new google.visualization.Timeline(container);
Формат данных
Строки: каждая строка в таблице представляет собой полосу временной шкалы.
Столбцы:
| Столбец 0 | Столбец 1 | Столбец 2 | Столбец 3 | Столбец 4 | |
|---|---|---|---|---|---|
| Цель: | Метка строки | Этикетка для бара (необязательно) | Подсказка (необязательно) | Начинать | Конец |
| Тип данных: | нить | нить | нить | номер или дата | номер или дата |
| Роль: | данные | данные | подсказка | данные | данные |
Варианты конфигурации
| Имя | |
|---|---|
| чередованиеRowStyle | Должна ли диаграмма чередовать цвет фона по индексу строки (т. е. окрашивать цвет фона строк с четным индексом в более темный оттенок). Если установлено значение false, фон диаграммы будет одного однородного цвета. Если это правда, фон диаграммы будет менять оттенок в зависимости от индекса строки. (Примечание: активна версия v51+) Тип: логический По умолчанию: правда |
| Избегайте перекрытия GridLines | Должны ли элементы отображения (например, полосы на временной шкале) закрывать линии сетки. Если установлено значение false, линии сетки могут быть полностью закрыты элементами отображения. Если это правда, элементы отображения могут быть изменены, чтобы линии сетки оставались видимыми. Тип: логический По умолчанию: правда |
| фоновый цвет | Цвет фона основной области диаграммы. Это может быть либо простая цветовая строка HTML, например: Тип: строка или объект По умолчанию: «белый» |
| цвета | Цвета, используемые для элементов диаграммы. Массив строк, где каждый элемент представляет собой строку цвета HTML, например: Тип: Массив строк. По умолчанию: цвета по умолчанию |
| включитьИнтерактивность | Определяет ли диаграмма события, связанные с пользователем, или реагирует на взаимодействие с пользователем. Если значение равно false, диаграмма не будет генерировать события «выбор» или другие события, основанные на взаимодействии (но будет генерировать события готовности или ошибки), а также не будет отображать наводящий текст или иным образом изменяться в зависимости от ввода пользователя. Тип: логический По умолчанию: правда |
| имя шрифта | Шрифт по умолчанию для всего текста на диаграмме. Вы можете переопределить это, используя свойства для определенных элементов диаграммы. Тип: строка По умолчанию: «Ариал» |
| размер шрифта | Размер шрифта по умолчанию (в пикселях) для всего текста на диаграмме. Вы можете переопределить это, используя свойства для определенных элементов диаграммы. Тип: номер По умолчанию: автоматический |
| сила IFrame | Рисует диаграмму внутри встроенного фрейма. (Обратите внимание, что в IE8 этот параметр игнорируется; все диаграммы IE8 рисуются в i-кадрах.) Тип: логический По умолчанию: ложь |
| высота | Высота диаграммы в пикселях. Тип: номер По умолчанию: высота содержащего элемента. |
| timeline.barLabelStyle | Объект, определяющий стиль текста метки панели. Он имеет такой формат: {fontName: <string>, fontSize: <string>} Также см. Тип: объект По умолчанию: ноль |
| timeline.colorByRowLabel | Если установлено значение true, все столбцы в строке окрашиваются одинаково. По умолчанию для каждой метки столбца используется один цвет. Тип: логический По умолчанию: ложь |
| timeline.groupByRowLabel | Если установлено значение false, создается одна строка для каждой записи Тип: логический По умолчанию: правда |
| timeline.rowLabelStyle | Объект, определяющий стиль текста метки строки. Он имеет такой формат: {color: <string>, fontName: <string>, fontSize: <string>} Тип: объект По умолчанию: ноль |
| timeline.showBarLabels | Если установлено значение false, метки столбцов пропускаются. По умолчанию они отображаются. Тип: логический По умолчанию: правда |
| timeline.showRowLabels | Если установлено значение false, метки строк опускаются. По умолчанию они отображаются. Тип: логический По умолчанию: правда |
| timeline.singleColor | Цвета всех полос одинаковые. Указывается в виде шестнадцатеричного значения (например, «#8d8»). Тип: строка По умолчанию: ноль |
| подсказка.isHtml | Установите значение Примечание. Настройка содержимого всплывающей подсказки HTML с помощью роли данных столбца подсказки не поддерживается визуализацией пузырьковой диаграммы . Тип: логический По умолчанию: правда |
| подсказка.триггер | Взаимодействие пользователя, вызывающее отображение всплывающей подсказки:
Тип: строка По умолчанию: «фокус» |
| ширина | Ширина диаграммы в пикселях. Тип: номер По умолчанию: ширина содержащего элемента. |
Методы
| Метод | |
|---|---|
draw(data, options) | Рисует диаграмму. Диаграмма принимает дальнейшие вызовы методов только после запуска события Тип возврата: нет |
clearChart() | Очищает диаграмму и освобождает все выделенные ей ресурсы. Тип возврата: нет |
getSelection() | Возвращает массив выбранных объектов диаграммы. Выбираемыми объектами являются полосы, записи легенды и категории. Для этой диаграммы в любой момент времени можно выбрать только одну сущность. Тип возвращаемого значения: Массив элементов выбора. |
События
| Имя | |
|---|---|
error | Вызывается, когда возникает ошибка при попытке отобразить диаграмму. Свойства: идентификатор, сообщение |
onmouseover | Вызывается, когда пользователь наводит указатель мыши на визуальный объект. Возвращает индексы строк и столбцов соответствующего элемента таблицы данных. Полоса соответствует ячейке в таблице данных, запись легенды — столбцу (индекс строки равен нулю), а категория — строке (индекс столбца равен нулю). Свойства: строка, столбец |
onmouseout | Вызывается, когда пользователь уводит указатель мыши от визуального объекта. Возвращает индексы строк и столбцов соответствующего элемента таблицы данных. Полоса соответствует ячейке в таблице данных, запись легенды — столбцу (индекс строки равен нулю), а категория — строке (индекс столбца равен нулю). Свойства: строка, столбец |
ready | Диаграмма готова для вызовов внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вам следует настроить прослушиватель этого события до вызова метода Свойства: нет |
select | Запускается, когда пользователь щелкает визуальный объект. Чтобы узнать, что было выбрано, вызовите Свойства: нет |
Политика данных
Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.