Scrittura del codice di visualizzazione
La libreria helper di Looker Studio fornisce un'interfaccia tra te e Looker Studio. Per utilizzare la libreria, fornisci una funzione di callback che esegua il rendering della visualizzazione.
La funzione più importante della libreria è subscribeToData, che accetta due argomenti: una funzione callback che esegue il rendering della visualizzazione e un oggetto options che specifica il tipo di trasformazione che vuoi applicare ai dati. Per saperne di più, consulta il riferimento della libreria.
Di seguito viene fornito uno schema di come potrebbe apparire il codice JavaScript della 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 chiave da tenere presenti quando si scrive una visualizzazione della community.
Gli aggiornamenti della funzione subscribeToData si verificano quando cambiano i dati, lo stile o
le dimensioni dell'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 file JavaScript, non HTML. Tutta la manipolazione del 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
Le visualizzazioni della community di Looker Studio consentono di caricare un solo file JavaScript. Il codice caricato deve essere un unico file che include la libreria helper dscc, eventuali librerie di visualizzazione JavaScript e il codice di visualizzazione.
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 sulla visualizzazione, nonché informazioni sulla posizione delle risorse della visualizzazione. La posizione del file manifest è denominata "ID componente" e viene utilizzata per caricare una visualizzazione della community.
Consulta il riferimento al file manifest per visualizzare un esempio di file manifest.
Il parametro devMode del manifest determina il comportamento di memorizzazione nella cache della
visualizzazione. Durante lo sviluppo della visualizzazione, devMode deve essere true per
assicurarsi che gli aggiornamenti forzati carichino l'ultima versione delle risorse. Una volta che il
codice è stabile, devMode deve essere false per garantire che i report con
visualizzazioni della community vengano caricati rapidamente. Per scoprire di più sulla memorizzazione nella cache, consulta la guida avanzata alla memorizzazione nella cache.
Passaggi successivi
Ora che hai scritto il codice per la visualizzazione, scopri come ospitare la visualizzazione.