Обзор
Временная шкала — это диаграмма, показывающая, как набор ресурсов используется с течением времени. Если вы управляете программным проектом и хотите проиллюстрировать, кто что делает и когда, или если вы организуете конференцию и вам нужно запланировать конференц-залы, временная шкала часто является разумным выбором для визуализации. Одним из популярных типов временной шкалы является диаграмма Ганта .
Примечание. В объектах даты JavaScript месяцы индексируются, начиная с нуля и заканчивая одиннадцатью, при этом январь — это месяц 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 Charts, а не только для временных шкал.)
Другой способ управления цветами отдельных полос — использование столбца с ролью стиля .
Код для добавления и заполнения столбца стиля:
<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 | |
|---|---|---|---|---|---|
| Цель: | Метка строки | Этикетка бара (необязательно) | Подсказка (необязательно) | Начинать | Конец |
| Тип данных: | нить | нить | нить | номер или дата | номер или дата |
| Роль: | данные | данные | подсказка | данные | данные |
Варианты конфигурации
| Имя | |
|---|---|
| чередование строк | Должна ли диаграмма чередовать цвет фона по индексу строки (т. е. подкрашивать фоновый цвет строк с четным индексом более темным оттенком). Если false, фон графика будет однотонным. Если true, фон диаграммы будет менять оттенок по индексу строки. (Примечание: активен v51+) Тип: логический По умолчанию: правда |
| избежатьперекрытияGridLines | Должны ли отображаемые элементы (например, полосы на временной шкале) закрывать линии сетки. При значении false линии сетки могут быть полностью закрыты элементами отображения. Если установлено значение true, элементы отображения могут быть изменены, чтобы линии сетки оставались видимыми. Тип: логический По умолчанию: правда |
| фоновый цвет | Цвет фона для основной области диаграммы. Может быть либо простой строкой цвета HTML, например: Тип: строка или объект По умолчанию: «белый» |
| цвета | Цвета, используемые для элементов диаграммы. Массив строк, где каждый элемент представляет собой строку цвета HTML, например: Тип: массив строк По умолчанию: цвета по умолчанию |
| включитьИнтерактивность | Отправляет ли диаграмма пользовательские события или реагирует на действия пользователя. Если задано значение false, диаграмма не будет выдавать «выбор» или другие события, основанные на взаимодействии (но будет выдавать события готовности или ошибки), и не будет отображать текст при наведении курсора или иным образом изменяться в зависимости от ввода пользователя. Тип: логический По умолчанию: правда |
| имя_шрифта | Начертание шрифта по умолчанию для всего текста на диаграмме. Вы можете переопределить это, используя свойства определенных элементов диаграммы. Тип: строка По умолчанию: «Arial». |
| размер шрифта | Размер шрифта по умолчанию в пикселях для всего текста на диаграмме. Вы можете переопределить это, используя свойства определенных элементов диаграммы. Тип: номер По умолчанию: автоматически |
| ForceIFrame | Рисует диаграмму внутри встроенного фрейма. (Обратите внимание, что в 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'). Тип: строка По умолчанию: ноль |
| tooltip.isHtml | Установите значение Примечание. Настройка содержимого всплывающей подсказки HTML с помощью роли данных столбца всплывающей подсказки не поддерживается визуализацией пузырьковой диаграммы . Тип: логический По умолчанию: правда |
| всплывающая подсказка.триггер | Взаимодействие с пользователем, вызывающее отображение всплывающей подсказки:
Тип: строка По умолчанию: «фокус». |
| ширина | Ширина диаграммы в пикселях. Тип: номер По умолчанию: ширина содержащего элемента |
Методы
| Метод | |
|---|---|
draw(data, options) | Рисует график. Диаграмма принимает дальнейшие вызовы методов только после запуска события Тип возврата: нет |
clearChart() | Очищает диаграмму и освобождает все выделенные ей ресурсы. Тип возврата: нет |
getSelection() | Возвращает массив выбранных объектов диаграммы. Доступными для выбора объектами являются столбцы, записи легенды и категории. Для этой диаграммы в любой момент можно выбрать только один объект. Тип возвращаемого значения: Массив элементов выбора |
События
| Имя | |
|---|---|
error | Запускается, когда возникает ошибка при попытке отобразить диаграмму. Свойства: идентификатор, сообщение |
onmouseover | Запускается, когда пользователь наводит курсор мыши на визуальный объект. Возвращает обратно индексы строк и столбцов соответствующего элемента таблицы данных. Гистограмма соотносится с ячейкой в таблице данных, запись легенды — со столбцом (индекс строки равен нулю), а категория — со строкой (индекс столбца равен нулю). Свойства: строка, столбец |
onmouseout | Запускается, когда пользователь уводит мышь от визуального объекта. Возвращает обратно индексы строк и столбцов соответствующего элемента таблицы данных. Гистограмма соотносится с ячейкой в таблице данных, запись легенды — со столбцом (индекс строки равен нулю), а категория — со строкой (индекс столбца равен нулю). Свойства: строка, столбец |
ready | Диаграмма готова к вызову внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вы должны настроить прослушиватель для этого события до вызова метода Свойства: нет |
select | Запускается, когда пользователь щелкает визуальный объект. Чтобы узнать, что было выбрано, вызовите Свойства: нет |
Политика данных
Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.