Pisanie kodu wizualizacji
Biblioteka pomocnicza Looker Studio zapewnia interfejs między Tobą a Looker Studio. Aby użyć biblioteki, podaj funkcję wywołania zwrotnego, która renderuje wizualizację.
Najważniejszą funkcją w bibliotece jest subscribeToData, która przyjmuje 2 argumenty: funkcję callback renderującą wizualizację i obiekt options określający, jakiego rodzaju przekształcenie chcesz zastosować do danych. Więcej informacji znajdziesz w dokumentacji biblioteki.
Poniżej znajdziesz zarys tego, jak może wyglądać kod JavaScript wizualizacji.
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})
Podczas tworzenia wizualizacji społecznościowej warto pamiętać o kilku kluczowych kwestiach.
Aktualizacje z funkcji subscribeToData występują, gdy zmieniają się dane, styl lub rozmiar elementu iframe.
Na przykład:
// 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 wczytuje i uruchamia pliki JavaScript, a nie HTML. Wszystkie manipulacje DOM muszą odbywać się za pomocą JavaScriptu.
Na przykład poniższy kod definiuje i dołącza do DOM element div.
// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);
Pakowanie kodu
Wizualizacje utworzone przez społeczność w Looker Studio umożliwiają wczytanie tylko jednego pliku JavaScript. Przesłany kod powinien być jednym plikiem, który zawiera bibliotekę pomocniczą dscc, wszystkie biblioteki wizualizacji JavaScript i kod wizualizacji.
Aby to zrobić w bashu, możesz użyć polecenia cat, jak poniżej.
cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js
Definiowanie pliku manifestu
Plik manifestu wizualizacji zawiera metadane wizualizacji oraz informacje o lokalizacji zasobów wizualizacji. Lokalizacja pliku manifestu jest nazywana „identyfikatorem komponentu” i służy do wczytywania wizualizacji utworzonej przez społeczność.
Zapoznaj się z informacjami o pliku manifestu, aby zobaczyć przykładowy plik manifestu.
Parametr devMode w pliku manifestu określa zachowanie wizualizacji związane z pamięcią podręczną. Podczas tworzenia wizualizacji wartość devMode powinna być ustawiona na true, aby wymuszone odświeżanie wczytywało najnowszą wersję zasobów. Gdy kod będzie stabilny, devMode powinna być false, aby raporty z wizualizacjami społeczności wczytywały się szybko. Więcej informacji o zapisywaniu w pamięci podręcznej znajdziesz w zaawansowanym przewodniku po zapisywaniu w pamięci podręcznej.
Dalsze kroki
Teraz, gdy masz już napisany kod wizualizacji, dowiedz się, jak hostować wizualizację.