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