Pisanie kodu wizualizacji
Biblioteka pomocnicza Looker Studio stanowi interfejs między Tobą a Looker Studio. Aby użyć biblioteki, udostępnij funkcję wywołania zwrotnego, która renderuje wizualizację.
Najbardziej wyróżnioną funkcją w bibliotece jest subscribeToData, który przyjmuje 2 argumenty: funkcję callback, która renderuje wizualizację, i obiekt options określający rodzaj przekształcenia, jakie mają zostać wykonane przez dane. Więcej informacji znajdziesz w dokumentacji biblioteki.
Poniżej znajdziesz zarys tego, jak może wyglądać JavaScript do 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})
Tworząc wizualizację społeczności, pamiętaj o kilku kluczowych kwestiach.
Zmiany wprowadzane przez funkcję subscribeToData mają miejsce w przypadku zmiany danych, stylu lub rozmiaru 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 operacje DOM muszą odbywać się za pomocą JavaScriptu.
Na przykład: ten kod definiuje i dołącza do modelu DOM element div.
// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);
Łączenie kodu w pakiety
Wizualizacje utworzone przez społeczność Looker Studio umożliwiają wczytanie tylko 1 pliku JavaScript. Przesłany kod powinien być pojedynczym plikiem zawierającym bibliotekę pomocniczą dscc, wszystkie biblioteki wizualizacji JavaScript oraz kod wizualizacji.
Aby to zrobić w bash, możesz użyć polecenia cat, tak jak poniżej.
cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js
Definiowanie pliku manifestu
Plik manifestu wizualizacji zawiera metadane dotyczące wizualizacji, a także informacje o lokalizacji jej zasobów. Lokalizacja pliku manifestu jest nazywana „identyfikatorem komponentu” i służy do wczytywania wizualizacji społeczności.
Zapoznaj się z informacjami o pliku manifestu, aby zobaczyć przykładowy plik manifestu.
Parametr devMode pliku manifestu określa sposób zapisywania wizualizacji w pamięci podręcznej. Podczas tworzenia wizualizacji parametr devMode powinien mieć wartość true, aby mieć pewność, że intensywne odświeżanie wczytuje najnowszą wersję zasobów. Gdy kod będzie stabilny, devMode powinien mieć wartość false, aby zapewnić szybkie wczytywanie raportów z wizualizacjami utworzonymi przez społeczność. Więcej informacji o pamięci podręcznej znajdziesz w przewodniku zaawansowanym dotyczącym buforowania.
Dalsze kroki
Masz już napisany kod wizualizacji, więc dowiedz się, jak hostować wizualizację.