Tworzenie wizualizacji

Piszę kod wizualizacji

Biblioteka pomocnicza Looker Studio to interfejs między Tobą a Lookerem. Studio. Aby użyć biblioteki, podaj funkcję wywołania zwrotnego, która renderuje i wizualizacji.

Najważniejszą funkcją w bibliotece jest subscribeToData, która wymaga dwóch argumenty: funkcja callback, która renderuje wizualizację, oraz options obiekt, który określa rodzaj przekształcenia, i podjąć. Więcej informacji znajdziesz w dokumentacji biblioteki.

Poniżej przedstawiliśmy zarys tego, co JavaScript umożliwia wizualizację. jak on wygląda.

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 społeczność, warto pamiętać o kilku kluczowych kwestiach i wizualizacji.

Aktualizacja funkcji subscribeToData następuje, gdy dane, styl lub Zmiany 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, nie HTML. Wszystkie manipulacje DOM musi odbywać się za pomocą JavaScriptu.

Na przykład: poniższy kod definiuje i dołącza element div do DOM.

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

Łączenie kodu

Wizualizacje utworzone przez społeczność Looker Studio umożliwiają wczytywanie tylko jednego kodu JavaScript . Przesłany kod powinien być pojedynczym plikiem zawierającym identyfikator dscc bibliotekę pomocniczą, wszystkie biblioteki wizualizacji JavaScript oraz wizualizację. w kodzie.

Aby to zrobić w bash, możesz użyć polecenia cat opisanego poniżej.

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

Definiowanie pliku manifestu

Plik manifestu wizualizacji zawiera metadane wizualizacji, które oraz informacje o lokalizacji zasobów wizualizacji. Lokalizacja jest nazywany „identyfikatorem komponentu” i służy do wczytywania elementu wizualizacji utworzonej przez społeczność.

Zapoznaj się z informacjami o pliku manifestu, aby zobaczyć przykładowy plik manifestu.

Parametr devMode pliku manifestu określa działanie pamięci podręcznej i wizualizacji. Podczas tworzenia wizualizacji właściwość devMode powinna mieć wartość true, aby upewnij się, że podczas twardego odświeżania najnowsza wersja zasobów będzie ładowana. Gdy funkcja jest stabilny, devMode powinien mieć wartość false, by mieć pewność, że raporty z szybko ładują się wizualizacje utworzone przez społeczność. Więcej informacji o buforowaniu znajdziesz w zaawansowanym buforowaniu.

Dalsze kroki

Po napisaniu kodu wizualizacji dowiedz się, jak udostępnia wizualizację.