Эта страница переведена с помощью Cloud Translation API.

Создание собственных визуализаций в Looker Studio

1. Введение

Looker Studio позволяет бесплатно создавать интерактивные панели мониторинга с красивыми визуализациями данных. Получайте данные из различных источников и создавайте неограниченное количество отчетов в Looker Studio с полными возможностями редактирования и обмена. На следующем скриншоте показан пример отчета Looker Studio:

( Нажмите здесь, чтобы просмотреть этот пример отчета в Looker Studio )

Looker Studio предоставляет несколько встроенных типов диаграмм, включая линейные диаграммы, столбчатые диаграммы, круговые диаграммы и диаграммы рассеяния. Визуализации, созданные сообществом , позволяют создавать и использовать собственные пользовательские визуализации на JavaScript в Looker Studio. Вы также можете делиться своими визуализациями с другими пользователями, чтобы они могли использовать их со своими данными.

Что вы узнаете

В этом практическом занятии по программированию вы узнаете:

Как работает визуализация сообщества в Looker Studio.
Как создать визуализацию сообщества с помощью вспомогательной библиотеки ds-component (dscc) .
Как использовать визуализацию сообщества в отчете Looker Studio.

Что вам понадобится

Для выполнения этого практического задания по программированию вам потребуется:

Доступ к интернету и веб-браузеру.
Аккаунт Google.
Доступ к хранилищу Google Cloud Platform.
Знание JavaScript.

2. Быстрый опрос

Почему вы выбрали именно этот учебный семинар?

Меня интересует визуализация данных в целом.

Я хочу узнать больше о Looker Studio.

Я хочу создать собственную визуализацию сообщества.

Я пытаюсь интегрировать Looker Studio с другой платформой.

Меня интересуют решения Google Cloud.

Как вы планируете использовать этот практический пример/учебное пособие?

Просмотреть бегло.

Прочитайте текст и выполните упражнения.

Как бы вы оценили свой опыт работы с Looker Studio?

Никогда о таком не слышал.

Я знаю, что это такое, но я этим не пользуюсь.

Я им иногда пользуюсь.

Я им регулярно пользуюсь.

Я опытный пользователь.

Что лучше всего описывает ваше прошлое?

Разработчик.

Дизайнер / UX-специалист.

Бизнес-аналитик / Аналитик данных / Финансовый аналитик.

Специалист по анализу данных / Инженер по анализу данных.

Эксперт по маркетингу, социальным сетям и цифровой аналитике.

Другой.

Какие библиотеки для визуализации на JavaScript вас интересуют?

D3.js

Google Charts

Chart.js

Листовка

Высокие чарты

Plot.ly

Другой

Перейдите на следующую страницу, чтобы отправить информацию для опроса.

3. Обзор визуализаций данных сообщества

Визуализации сообщества Looker Studio позволяют создавать и использовать пользовательские визуализации на JavaScript в ваших панелях мониторинга.

В этом практическом задании вы создадите табличную диаграмму-визуализацию сообщества, которая поддерживает 1 измерение, 1 метрику и стилизацию заголовка таблицы.

4. Рабочий процесс разработки визуализации сообщества

Для создания визуализации сообщества вам потребуются следующие файлы в хранилище Google Cloud Platform, которое вы создадите на следующем шаге:

Имя файла	Тип файла	Цель
manifest.json*	JSON	Метаданные о визуализации и расположение всех ресурсов визуализации.
viz-codelab.json	JSON	Параметры настройки данных и стиля для панели «Свойства».
viz-codelab.js	JavaScript	Код JavaScript для отображения визуализации.
viz-codelab.css (необязательно)	CSS	CSS-стили для визуализации.

*Манифест — единственный файл, для которого требуется обязательное имя. Остальные файлы могут иметь другие имена, при условии, что их имя/расположение указано в файле манифеста.

5. Напишите визуализацию "Hello, world!".

В этом разделе вы добавите код, необходимый для отображения простой визуализации "Hello, world!".

Напишите исходный код визуализации на JavaScript.

Шаг 1: Загрузите файл dscc.min.js со страницы библиотеки компонентов сообщества Looker Studio (dscc) и скопируйте его в свою рабочую директорию.

Шаг 2: Скопируйте следующий код в текстовый редактор и сохраните его как viz-codelab-src.js в локальной рабочей директории.

viz-codelab-src.js

function drawViz(data) {

  // Container setup.
  let container = document.getElementById('container');
  if (container) {
    container.textContent = '';
  } else {
    container = document.createElement('div')
    container.id = 'container'
    document.body.appendChild(container);
  }

  // Render the viz.
  container.textContent = 'Hello, viz world!';

}

// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });

Подготовьте файл пакета JavaScript.

Шаг 3: Объедините весь необходимый JavaScript в один файл, скопировав содержимое библиотеки вспомогательного кода визуализации ( dscc.min.js ) и вашего файла viz-codelab-src.js в новый файл с именем viz-codelab.js . Для объединения файлов можно выполнить следующие команды. Повторяйте этот шаг каждый раз при обновлении исходного кода визуализации .

скрипт конкатенации для Linux/Mac OS

cat dscc.min.js > viz-codelab.js
echo >> viz-codelab.js
cat viz-codelab-src.js >> viz-codelab.js

Скрипт конкатенации Windows

del viz-codelab.js
type nul > viz-codelab.js
type dscc.min.js >> viz-codelab.js
echo.>> viz-codelab.js
type viz-codelab-src.js >> viz-codelab.js

6. Напишите CSS-код для визуализации.

CSS-файл определяет стиль вашей визуализации и является необязательным. Скопируйте следующий CSS-код и сохраните его как viz-codelab.css.

viz-codelab.css

table {
    width: 100%;
    border-collapse: collapse;
}

tr {
    border-bottom: 1pt solid #d1d1d1;
}

th, td {
    padding: 8px;
    text-align: left;
}

7. Напишите конфигурацию в формате JSON.

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

Скопируйте следующий код и сохраните его как viz-codelab.json. Чтобы узнать больше о настраиваемых свойствах, ознакомьтесь со справочником по настройке визуализации сообщества .

viz-codelab.json

{
    "data": [
        {
            "id": "concepts",
            "label": "Concepts",
            "elements": [
                {
                    "id": "tableDimension",
                    "label": "Dimension",
                    "type": "DIMENSION",
                    "options": {
                        "min": 1,
                        "max": 1
                    }
                },
                {
                    "id": "tableMetric",
                    "label": "Metric",
                    "type": "METRIC",
                    "options": {
                        "min": 1,
                        "max": 1
                    }
                }
            ]
        }
    ],
    "style": [
        {
            "id": "header",
            "label": "Table Header",
            "elements": [
                {
                    "type": "FILL_COLOR",
                    "id": "headerBg",
                    "label": "Header Background Color",
                    "defaultValue": "#e0e0e0"
                }
            ]
        }
    ]
}

8. Создайте проект и хранилище в облаке.

Шаг 1: Создайте проект на платформе Google Cloud Platform (GCP) или используйте существующий.

Шаг 2: Создайте корзину GCP . Рекомендуемый класс хранения — региональный. Подробную информацию о бесплатных уровнях см. в разделе «Цены на облачное хранилище» . Примечание: Маловероятно, что хранение ваших визуализаций будет платным в рамках регионального класса хранения.

Шаг 3: Запишите имя/путь вашего хранилища, начиная с раздела после Buckets/ . В Looker Studio этот путь называется «идентификатором компонента» и используется для идентификации и развертывания визуализации.

9. Напишите файл manifest.json.

Файл манифеста содержит информацию о местоположении и ресурсах вашей визуализации. Он должен называться " manifest.json " и находиться в папке bucket/path, созданной на предыдущем шаге, — в той же папке, которая используется для идентификатора вашего компонента.

Скопируйте следующий код в текстовый редактор и сохраните его как manifest.json.

Чтобы узнать больше о манифесте, посетите справочную документацию по манифесту .

manifest.json

{
    "name": "Community Visualization",
    "logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
    "organization": "Looker Studio Codelab",
    "organizationUrl": "https://url",
    "termsOfServiceUrl": "https://url",
    "supportUrl": "https://url",
    "packageUrl": "https://url",
    "privacyPolicyUrl": "https://url",
    "description": "Community Visualization Codelab",
    "devMode": true,
    "components": [
        {
            "id": "tableChart",
            "name": "Table",
            "iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
            "description": "A simple table chart.",
            "resource": {
                "js": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.js",
                "config": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.json",
                "css": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.css"
            }
        }
    ]
}

10. Загрузите файлы визуализации в облачное хранилище Google.

Загрузите файлы manifest.json , viz-codelab.js , viz-codelab.json и viz-codelab.css в свой сегмент Google Cloud Storage, используя веб-интерфейс или инструмент командной строки gsutil . Повторяйте это каждый раз при обновлении визуализации.

команды загрузки gsutil

gsutil cp -a public-read manifest.json gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
gsutil cp -a public-read viz-codelab.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET

11. Протестируйте визуализацию сообщества в Looker Studio.

Создайте отчет и добавьте данные.

Шаг 1: Скопируйте URL-адрес набора данных для визуализации сообщества . В качестве альтернативы, используйте любой другой источник данных по вашему выбору и пропустите следующие шаги.

Шаг 2: Войдите в Looker Studio . В левом верхнем углу нажмите + Создать , затем выберите Отчет.

Шаг 3: Вы увидите инструмент «Редактор отчетов» с открытой панелью «Добавить данные в отчет» .

Шаг 4: На вкладке «Подключение к данным» выберите коннектор Google Sheets by Google .

Шаг 5: Выберите URL-адрес и вставьте в него URL-адрес таблицы Google Sheets из шага 1.

Шаг 6: В правом нижнем углу нажмите «Добавить» .

Шаг 7 : Если появится запрос на подтверждение добавления данных в этот отчет, нажмите «ДОБАВИТЬ В ОТЧЕТ» . Будет создан отчет без названия, и в него будет добавлена таблица по умолчанию с примерами данных. При желании выберите и удалите таблицу по умолчанию, чтобы в итоге получился пустой отчет.

Добавьте визуализацию вашего сообщества в отчет.

Шаг 1: На панели инструментов щелкните «Визуализации и компоненты сообщества». .

Шаг 2: Нажмите + Узнать больше , чтобы открыть Галерею сообщества.

Шаг 3: Нажмите « Создать собственную визуализацию».

Шаг 4: В разделе «Тестирование и добавление визуализации сообщества » введите путь к файлу Manifest и нажмите «Отправить». Путь к файлу Manifest — это имя корзины Google Cloud Storage и путь к файлу manifest вашей визуализации, с префиксом gs://. Например: gs://community-viz-docs/viz-codelab . Если вы ввели действительный путь к файлу Manifest, должна отобразиться карточка визуализации.

Шаг 5: Щелкните по карточке визуализации, чтобы добавить ее в отчет.

Шаг 6: Если появится запрос, дайте согласие на отображение визуализации.

Шаг 7: При желании обновите выбранное измерение и метрику для таблицы. Если вы используете предоставленный пример набора данных, установите измерение «Страна» , а метрику — «Население». Это не повлияет на визуализацию до более позднего этапа выполнения практического задания.

Панель свойств в правой части экрана отображает элементы, настроенные в viz-codelab.json .

В панели «Настройка» визуализация позволяет выбрать одно измерение и одну метрику.

В панели «Стиль» визуализация имеет единственный элемент для оформления заголовка таблицы. На данном этапе элемент управления стилем не будет влиять на визуализацию до тех пор, пока код визуализации не будет обновлен на более позднем этапе. Примечание: Вы увидите дополнительные параметры стиля для вашей визуализации, которые вы не определили в файле конфигурации. Это ожидаемо, поскольку все визуализации имеют набор общих элементов управления, которые доступны автоматически.

12. Представьте данные в виде таблицы.

В этом разделе вам нужно будет обновить визуализацию, чтобы отобразить пример набора данных «Визуализация сообщества» в виде таблицы.

Данные для отображения доступны в объекте tables и структурированы на основе преобразования, указанного в вашей визуализации. В этом практическом задании визуализация запросила формат таблицы ( tableTransform ), который включает объект headers и объект rows , содержащий все данные, необходимые для отображения таблицы.

Шаг 1: Замените содержимое файла viz-codelab-src.js приведенным ниже кодом.

viz-codelab-src.js

function drawViz(data) {

  // Container setup.
  let container = document.getElementById('container');
  if (container) {
    container.textContent = '';
  } else {
    container = document.createElement('div')
    container.id = 'container'
    document.body.appendChild(container);
  }

  // Create the table.
  const table = document.createElement('table');
  const tableHeader = document.createElement('thead');
  const tableBody = document.createElement('tbody');

  data.tables.DEFAULT.headers.forEach(function (column) {
    const tableColumn = document.createElement('th');
    tableColumn.textContent = column.name;
    tableHeader.appendChild(tableColumn);
  });

  data.tables.DEFAULT.rows.forEach(function(row) {
    const tableRow = document.createElement('tr');
    row.forEach(function(cell) {
      const tableCell = document.createElement('td');
      if (typeof cell == 'number') {
        tableCell.textContent = new Intl.NumberFormat().format(cell);
      } else {
        tableCell.textContent = cell;
      }
      tableRow.appendChild(tableCell);
    });
    tableBody.appendChild(tableRow);
  });
  table.appendChild(tableHeader);
  table.appendChild(tableBody);

  // Render the table.
  container.appendChild(table);

}

// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });

Шаг 2: Подготовьте файл пакета JavaScript, затем загрузите и перезапишите файлы визуализации в Google Cloud Storage.

Шаг 3: Обновите отчет Looker Studio, чтобы перезагрузить и протестировать визуализацию сообщества. Теперь таблица отображает данные (то есть таблицу Google Sheets) и заголовки столбцов на основе выбранного измерения и показателя. Измените размер визуализации, чтобы увидеть все строки.

13. Динамическое применение изменений стиля.

В этом разделе вы обновите визуализацию, чтобы стиль заголовка таблицы соответствовал цвету заливки, выбранному на панели «Стиль» .

Состояние всех элементов стиля доступно в объекте style , где каждый ключ элемента определяется на основе конфигурации стиля визуализации ( viz-codelab.json ). В этом разделе вы получите выбранный цвет заливки и используете его для обновления цвета фона заголовка таблицы.

Шаг 1: Замените код в файле viz-codelab-src.js приведенным ниже кодом.

viz-codelab-src.js

function drawViz(data) {

  // Container setup.
  let container = document.getElementById('container');
  if (container) {
    container.textContent = '';
  } else {
    container = document.createElement('div')
    container.id = 'container'
    document.body.appendChild(container);
  }

  // Create the table.
  const table = document.createElement('table');
  const tableHeader = document.createElement('thead');
  const tableBody = document.createElement('tbody');

  data.tables.DEFAULT.headers.forEach(function (column) {
    const tableColumn = document.createElement('th');
    tableColumn.textContent = column.name;
    tableHeader.appendChild(tableColumn);
  });

  data.tables.DEFAULT.rows.forEach(function(row) {
    const tableRow = document.createElement('tr');
    row.forEach(function(cell) {
      const tableCell = document.createElement('td');
      if (typeof cell == 'number') {
        tableCell.textContent = new Intl.NumberFormat().format(cell);
      } else {
        tableCell.textContent = cell;
      }
      tableRow.appendChild(tableCell);
    });
    tableBody.appendChild(tableRow);
  });
  table.appendChild(tableHeader);
  table.appendChild(tableBody);

  // Set header color based on style control.
  tableHeader.style.backgroundColor = data.style.headerBg.value.color;

  // Render the table.
  container.appendChild(table);

}

// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });

Шаг 2: Подготовьте файл пакета JavaScript, затем загрузите и перезапишите файлы визуализации в Google Cloud Storage.

Шаг 3: Обновите отчет Looker Studio, чтобы перезагрузить и протестировать визуализацию сообщества.

Шаг 4: На панели «Стиль» используйте элемент управления « Цвет фона заголовка» , чтобы изменить цвет фона заголовка таблицы.

Поздравляем! Вы создали визуализацию сообщества в Looker Studio! На этом выполнение этого практического задания завершается. Теперь давайте посмотрим, какие следующие шаги вы можете предпринять.

14. Дальнейшие шаги

Расширьте возможности визуализации.

Узнайте больше о данных и форматах, доступных для визуализации.
Узнайте больше о доступных элементах стиля и добавьте дополнительные элементы оформления к вашей визуализации.
Добавьте интерактивные элементы в свою визуализацию.
Научитесь создавать визуализации локально.

Расширьте возможности визуализации данных, созданных сообществом.

Ознакомьтесь с справочными материалами по вспомогательной библиотеке dscc , манифесту и файлу конфигурации .
Отправьте свою визуализацию в нашу Галерею визуализаций сообщества .
Создайте платформу для взаимодействия с сообществом в Looker Studio.

Дополнительные ресурсы

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

Тип ресурса	Пользовательские функции	Функции для разработчиков
Документация	Центр поддержки	Документация для разработчиков
Новости и обновления	Зарегистрируйтесь в Looker Studio > Настройки пользователя	Список рассылки для разработчиков
Задавайте вопросы	Пользовательский форум	Stack Overflow [looker-studio] Форум разработчиков Looker Studio
Примеры	Галерея отчетов	Репозиторий открытого исходного кода