Написание вашей визуализации

Написание кода визуализации

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

Самая важная функция в библиотеке — subscribeToData , которая принимает два аргумента: функцию callback , которая визуализирует визуализацию, и объект options , который указывает, какой тип преобразования вы хотите, чтобы ваши данные были выполнены. Чтобы узнать больше, просмотрите справочник по библиотеке .

Ниже представлено краткое описание того, как может выглядеть ваш JavaScript для визуализации.

function drawViz(vizData){
  var height = dscc.getHeight();
  var width = dscc.getWidth();
  console.log(vizData);
  // this is where you write your viz code
}

dscc.subscribeToData(drawViz, {transform: dscc.objectTransform})

При написании визуализации сообщества следует учитывать несколько ключевых моментов.

Обновления функции subscribeToData происходят при изменении данных, стилей или размера iframe.

Например:

// create and add the canvas
// do this one time
var canvasElement = document.createElement('canvas');
var ctx = canvasElement.getContext('2d');
canvasElement.id = 'myViz';
document.body.appendChild(canvasElement);

function drawViz(data){
  // clear the canvas
  var ctx = canvasElement.getContext('2d');
  ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);

  // viz code goes here

}

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

Например: следующий код определяет и добавляет элемент div в DOM.

// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);

Объединение кода

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

Чтобы сделать это в bash, вы можете использовать команду cat , как показано ниже.

cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js

Определение манифеста

Файл манифеста визуализации содержит метаданные о визуализации, а также информацию о расположении ресурсов визуализации. Местоположение файла манифеста называется «идентификатором компонента» и используется для загрузки визуализации сообщества.

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

Параметр devMode манифеста определяет поведение кэширования визуализации. При разработке визуализации devMode должен иметь значение true , чтобы гарантировать, что при жестком обновлении загружается последняя версия ресурсов. Как только код станет стабильным, devMode должен иметь значение false , чтобы гарантировать быструю загрузку отчетов с визуализациями сообщества. Дополнительную информацию о кэшировании см. в расширенном руководстве по кэшированию .

Следующие шаги

Теперь, когда у вас написан код для вашей визуализации, узнайте, как разместить ее на хосте .