Scrivere il codice della visualizzazione
La libreria di assistenza di Data Studio fornisce un'interfaccia tra te e Data Studio. Per utilizzare la libreria, fornisci una funzione di callback che esegue 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 fornita una struttura 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 alcune cose fondamentali da tenere presenti quando scrivi 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. Tutte le manipolazioni del DOM devono 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);
Raggruppare il codice
Le visualizzazioni della community di Looker Studio ti consentono di caricare un solo file JavaScript. Il codice caricato deve essere un singolo file che include la libreria di assistenza dscc , tutte le librerie di visualizzazione JavaScript e il codice di visualizzazione.
Per farlo in bash, puoi utilizzare il comando cat, come di seguito.
cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js
Definire il manifest
Il file manifest della visualizzazione fornisce metadati sulla visualizzazione, nonché informazioni sulla posizione delle risorse di visualizzazione. La posizione del file manifest è denominata "ID componente" e viene utilizzata per caricare una visualizzazione della community.
Consulta il riferimento del manifest per visualizzare un manifest di esempio.
Il parametro devMode del manifest determina il comportamento di memorizzazione nella cache della visualizzazione. Durante lo sviluppo della visualizzazione, devMode deve essere true per garantire 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 le 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 ospitarla.