Написание кода визуализации
Вспомогательная библиотека 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 чтобы гарантировать быструю загрузку отчетов с визуализациями сообщества. Дополнительную информацию о кэшировании см. в расширенном руководстве по кэшированию .
Следующие шаги
Теперь, когда у вас написан код для вашей визуализации, узнайте, как разместить ее на хосте .