Чтобы привлечь внимание читателя, рекомендуется отображать наборы данных в виде диаграмм вместо таблиц. Если вы говорите о многих событиях в своем блоге, отображение этих событий в хронологическом порядке на временной шкале будет более эффективно и интересно передавать сообщение.
В этом уроке я научу вас, как использовать Google Charts для добавления профессионально выглядящих графиков времени на ваши веб-страницы.
Загрузка Google Charts
Поскольку я собираюсь использовать Google API Loader для загрузки Google Charts, я добавлю следующий тег script в заголовок страницы, которая будет отображать временную шкалу:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
Теперь я могу использовать метод google.load для загрузки любого API Google. Для Google Charts мне нужно загрузить API визуализации вместе с пакетом timeline API. Я также добавлю обратный вызов, чтобы узнать, когда API будет готов.
google.load('visualization', '1.0', { packages:["timeline"] }); google.setOnLoadCallback(start); function start() { /* This method will be called when the Visualization API has been loaded. */ }
Добавление элемента для хранения диаграммы
API Charts нужен HTML-элемент для рисования своих диаграмм. Я добавлю пустой div в тело страницы и назову его timelineHolder . Я могу установить размеры вашей временной шкалы, установив свойства width и height в CSS. Давайте создадим временную шкалу с размерами 600 на 300 пикселей.
.timelineHolder { width: 600px; height: 300px; }
Определение данных временной шкалы
В этом уроке давайте представим год в жизни воображаемого путешественника по имени Алиса на временной шкале. Вот что Алиса сделала в этом году:
- С 15 января по 26 февраля она была в Берлине
- С 20 апреля по 1 июля она была в Париже
- С 21 июля по 30 августа она была в Мадриде
- Со 2 ноября по 5 декабря она была в Перте
Эта информация должна быть преобразована в DataTable . Наш DataTable будет иметь четыре столбца:
- метка
- Место
- Дата начала
- Дата окончания
Создайте новую функцию с именем prepareDataTable() для создания и инициализации DataTable . Мы должны использовать метод addColumn чтобы добавить каждый из четырех столбцов. После добавления столбцов используйте метод addRow чтобы добавить все четыре поездки. Помните, что даты должны быть представлены как объекты Date а месяцы нумеруются 0-11 (вместо 1-12). Вот как должна выглядеть наша функция:
function prepareDataTable() { var dataTable = new google.visualization.DataTable(); // Add columns dataTable.addColumn({ type: 'string', id: 'Label'}); dataTable.addColumn({ type: 'string', id: 'Place'}); dataTable.addColumn({ type: 'date', id: 'Arrival Date'}); dataTable.addColumn({ type: 'date', id: 'Departure Date'}); //Add Rows dataTable.addRow(['1', 'Berlin', new Date(2014, 0, 15), new Date(2014, 1, 26)]); dataTable.addRow(['2', 'Paris', new Date(2014, 3, 20), new Date(2014, 6, 1)]); dataTable.addRow(['3', 'Madrid', new Date(2014, 6, 21), new Date(2014, 7, 30)]); dataTable.addRow(['4', 'Perth', new Date(2014, 10, 2), new Date(2014, 11, 5)]); return dataTable; }
Обратите внимание, что первый столбец DataTable всегда обрабатывается API- DataTable как метка строки.
Рисование временной шкалы
Теперь, когда данные были преобразованы в формат, понятный API Google Charts, мы можем нарисовать график. Для этого мы создадим экземпляр класса Timeline , а затем передадим DataTable его методу draw . Мы обновим метод start для этого:
function start() { // Pick the HTML element var timelineHolder = document.getElementById("timelineHolder"); // Create an instance of Timeline var timeline = new google.visualization.Timeline(timelineHolder); var dataTable = prepareDataTable(); // Draw the timeline timeline.draw(dataTable); }
На этом этапе, если вы загрузите свою страницу с помощью браузера, вы увидите временную шкалу, которая выглядит следующим образом:
Настройка временной шкалы
Изменение внешнего вида временной шкалы включает в себя создание объекта JSON, который содержит одно или несколько имен свойств вместе с вашими предпочтительными значениями для этих свойств.
Например, если мы хотим изменить цвет фона временной шкалы на #ffbb33 и использовать один цвет для всех поездок, скажем, #669900 , нам нужно будет создать следующий объект JSON:
var config = { backgroundColor: '#ffbb33', timeline: { singleColor: '#669900' } }
Затем мы передаем этот объект в качестве дополнительного параметра в метод draw временной шкалы:
timeline.draw(dataTable, config);
При обновлении нашей страницы в браузере наша временная шкала будет выглядеть следующим образом:
Полный список всех доступных параметров конфигурации см. В документации по временной шкале Google Charts .
Возможно, вы заметили, что поездки размещаются одна под другой, каждая из которых находится на отдельной строке / строке. Это потому, что мы использовали разные метки для каждой строки. Чтобы поместить все поездки в одну строку, вам нужно изменить первый столбец DataTable таким образом, чтобы все четыре записи имели одинаковую метку строки.
В нашем примере мы будем использовать путешествия Алисы в качестве метки для всех строк. Мы обновим нашу функцию prepareDataTable чтобы вызовы addRow выглядели так:
dataTable.addRow(['Alice\'s Travels', 'Berlin', new Date(2014, 0, 15), new Date(2014, 1, 26)]); dataTable.addRow(['Alice\'s Travels', 'Paris', new Date(2014, 3, 20), new Date(2014, 6, 1)]); dataTable.addRow(['Alice\'s Travels', 'Madrid', new Date(2014, 6, 21), new Date(2014, 7, 30)]); dataTable.addRow(['Alice\'s Travels', 'Perth', new Date(2014, 10, 2), new Date(2014, 11, 5)]);
Сроки теперь будут выглядеть более компактно:
Добавление интерактивности
Наш график уже интерактивен. При наведении курсора на любую поездку отображается всплывающая подсказка с автоматически сгенерированным содержимым.
Чтобы добавить пользовательское поведение при щелчке элемента данных, мы должны добавить обработчик для события select с google.visualization.events.addListener метода google.visualization.events.addListener . В обработчике мы можем использовать метод getSelection чтобы определить, какой элемент был нажат.
Вот пример обработчика, который отображает текущее выбранное место. Вы можете добавить его в конец функции start после вызова метода draw :
google.visualization.events.addListener(timeline, 'select', function() { alert(dataTable.getValue(getSelection()[0].row, 1); });
Вывод
В этом руководстве я показал вам, как использовать Google Charts для отображения событий в хронологическом порядке на временной шкале, которую можно легко добавить на любую веб-страницу. Я также показал вам, как настроить график и сделать его интерактивным. Чтобы узнать больше о временной шкале, обратитесь к документации временной шкалы.