Scrittura del codice di visualizzazione
La libreria helper di Looker Studio fornisce un'interfaccia tra te e Looker Studio. Per usare la libreria, fornisci una funzione di callback che mostri la visualizzazione.
La funzione più importante nella libreria è subscribeToData, che richiede due
argomenti: una funzione callback che esegue il rendering della visualizzazione e un
oggetto options che specifica il tipo di trasformazione che vuoi venga applicata
ai tuoi dati. Per scoprire di più, consulta il riferimento della libreria.
Di seguito viene fornita una descrizione di come potrebbe essere il codice JavaScript di 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 presenti quando si scrive una visualizzazione della community.
Gli aggiornamenti dalla funzione subscribeToData si verificano quando i dati, lo stile o le dimensioni dell'iframe cambiano.
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. Tutte le manipolazioni del DOM devono avvenire tramite JavaScript.
Ad esempio, il codice seguente 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 file JavaScript. Il codice caricato deve essere un singolo file che include la libreria helper dscc, eventuali librerie di visualizzazione JavaScript e il codice di visualizzazione.
Per farlo in bash, puoi usare il comando cat, come descritto di seguito.
cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js
Definizione del manifest
Il file manifest di visualizzazione fornisce metadati sulla visualizzazione e informazioni sulla posizione delle risorse di visualizzazione. La posizione del file manifest è detta "ID componente" e utilizzata per caricare una visualizzazione della community.
Esamina il riferimento al file manifest per vedere un file manifest di esempio.
Il parametro devMode del manifest determina il comportamento di memorizzazione nella cache della visualizzazione. Durante lo sviluppo della visualizzazione, il valore devMode deve essere true per garantire che gli aggiornamenti forzati carichino la versione più recente delle risorse. Una volta che il codice è stabile, devMode dovrebbe essere false per garantire che i report con visualizzazioni della community vengano caricati rapidamente. Per ulteriori informazioni sulla memorizzazione nella cache, consulta la guida avanzata sulla memorizzazione nella cache.
Passaggi successivi
Ora che hai scritto il codice per la visualizzazione, scopri come ospitare la visualizzazione.