Scrittura della visualizzazione

Nota: la funzionalità di visualizzazione della community si trova in "Anteprima per gli sviluppatori". Per ulteriori informazioni per saperne di più sulle funzionalità e sui miglioramenti in arrivo durante questo periodo, visita la Pagina Anteprima per gli sviluppatori.

Scrittura del codice di visualizzazione

La libreria helper di Looker Studio offre un'interfaccia tra te e Looker Studio. Per utilizzare la libreria, fornisci una funzione di callback che esegua il rendering visualizzazione.

La funzione più rilevante nella libreria è subscribeToData, che richiede due argomenti: una funzione callback che mostra la visualizzazione e un options che specifica il tipo di trasformazione che vuoi che venga eseguita per i tuoi dati . Per scoprire di più, consulta il riferimento alla libreria.

Di seguito viene fornita una descrizione di ciò che potrebbe essere usato in JavaScript per la visualizzazione .

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})

Ci sono alcuni aspetti fondamentali da tenere a mente quando si scrive una community visualizzazione.

Gli aggiornamenti dalla funzione subscribeToData si verificano quando i dati, lo stile o modifiche alle dimensioni dell'iframe.

Punto chiave: la funzione drawViz() deve cancellare il canvas ogni volta che viene chiamato. In caso contrario, potrebbe aggiungere continuamente visualizzazioni all'iframe.

Ad esempio:

// 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 carica ed esegue i file JavaScript, non HTML. Manipolazione di tutti i DOM deve avvenire tramite JavaScript.

Ad esempio, il seguente codice definisce e aggiunge un div al DOM.

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

Raggruppamento del codice in bundle

Le visualizzazioni della community di Looker Studio consentono di caricare un solo codice JavaScript . Il codice caricato deve essere un singolo file che include il file dscc libreria helper, eventuali librerie di visualizzazione JavaScript e la visualizzazione le API nel tuo codice.

Per farlo in bash, puoi utilizzare il comando cat, come mostrato di seguito.

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

Definizione del manifest

Il file manifest della visualizzazione fornisce metadati relativi alla visualizzazione, come nonché informazioni sulla posizione delle risorse di visualizzazione. La posizione del file manifest è denominato "ID componente" e viene utilizzato per caricare della community.

Esamina il riferimento del file manifest per visualizzare un file manifest di esempio.

Nota: il nome del file manifest deve essere manifest.json

Il parametro devMode del manifest determina il comportamento di memorizzazione nella cache dell' visualizzazione. Durante lo sviluppo della visualizzazione, il valore devMode dovrebbe essere true per assicurati che gli aggiornamenti forzati carichino la versione più recente delle risorse. Una volta sia stabile, devMode deve essere false per garantire che i report con le visualizzazioni della community si caricano rapidamente. Per saperne di più sulla memorizzazione nella cache, consulta guida avanzata alla memorizzazione nella cache.

Passaggi successivi

Ora che hai scritto il codice per la tua visualizzazione, scopri come ospitare la visualizzazione.