1. Introduzione
Looker Studio ti consente di creare dashboard live e interattive con visualizzazioni dei dati accattivanti, senza costi. Recupera i dati da una serie di origini e crea report illimitati in Looker Studio, con funzionalità complete di modifica e condivisione. Lo screenshot seguente mostra un esempio di report di Looker Studio:
( Fai clic qui per visualizzare questo report di esempio in Looker Studio)
Looker Studio offre diversi tipi di grafici integrati, tra cui grafici a linee, a barre, a torta e a dispersione. Le visualizzazioni della community ti consentono di creare e utilizzare visualizzazioni JavaScript personalizzate in Looker Studio. Puoi anche condividere le visualizzazioni della community con altri utenti, in modo che possano utilizzarle con i propri dati.
Obiettivi didattici
In questo codelab imparerai:
- Come funziona una visualizzazione della community di Looker Studio.
- Come creare una visualizzazione della community utilizzando la libreria helper ds-component (dscc).
- Come utilizzare la visualizzazione della community in un report di Looker Studio.
Che cosa ti serve
Per completare questo lab di codici, ti serviranno:
- Accesso a internet e a un browser web.
- Un Account Google.
- Accesso a un bucket di archiviazione Google Cloud Platform.
- Dimestichezza con JavaScript.
2. Sondaggio rapido
Perché hai scelto questo codelab?
Come prevedi di utilizzare questo codelab/tutorial?
Come valuteresti la tua esperienza con Looker Studio?
Quale opzione descrive meglio il tuo background?
Quali librerie di visualizzazione JavaScript ti interessano?
Passa alla pagina successiva per inviare le informazioni del sondaggio.
3. Panoramica delle visualizzazioni della community
Le visualizzazioni della community di Looker Studio ti consentono di creare e utilizzare visualizzazioni JavaScript personalizzate nelle dashboard.
In questo codelab creerai una visualizzazione della community del grafico a tabella che supporta una dimensione, una metrica e lo stile dell'intestazione della tabella.
4. Flusso di lavoro di sviluppo della visualizzazione della community
Per creare una visualizzazione della community, devi disporre dei seguenti file in un bucket di archiviazione Google Cloud, che creerai in un passaggio successivo:
Nome file | Tipo di file | Finalità |
manifest.json* | JSON | Metadati sulla visualizzazione e sulle posizioni di tutte le risorse di visualizzazione. |
viz-codelab.json | JSON | Opzioni di configurazione di dati e stile per il riquadro Proprietà. |
viz-codelab.js | JavaScript | Il codice JavaScript per il rendering della visualizzazione. |
viz-codelab.css (facoltativo) | CSS | Stili CSS per la visualizzazione. |
*Il manifest è l'unico file con un nome obbligatorio. Gli altri file possono avere un nome diverso, purché il nome/la posizione sia specificato nel file manifest.
5. Scrivere una visualizzazione Hello, world!
In questa sezione aggiungerai il codice necessario per eseguire il rendering di una semplice visualizzazione Hello, world!.
Scrivi l'origine JavaScript della visualizzazione
Passaggio 1: scarica il file dscc.min.js dalla pagina Libreria dei componenti della community di Looker Studio (dscc) e copialo nella directory di lavoro.
Passaggio 2: copia il seguente codice in un editor di testo e salvalo come viz-codelab-src.js nella directory di lavoro locale.
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Render the viz.
container.textContent = 'Hello, viz world!';
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
Prepara il file bundle JavaScript
Passaggio 3:combina tutto il codice JavaScript richiesto in un unico file copiando i contenuti della libreria helper di visualizzazione (dscc.min.js) e del file viz-codelab-src.js in un nuovo file denominato viz-codelab.js. È possibile eseguire i seguenti comandi per concatenare i file. Ripeti questo passaggio ogni volta che aggiorni il codice di visualizzazione dell'origine.
Script di concatenazione Linux/Mac OS
cat dscc.min.js > viz-codelab.js
echo >> viz-codelab.js
cat viz-codelab-src.js >> viz-codelab.js
Script di concatenazione di Windows
del viz-codelab.js
type nul > viz-codelab.js
type dscc.min.js >> viz-codelab.js
echo.>> viz-codelab.js
type viz-codelab-src.js >> viz-codelab.js
6. Scrivi il CSS della visualizzazione
Il file CSS definisce lo stile della visualizzazione ed è facoltativo. Copia il seguente CSS e salvalo come viz-codelab.css.
viz-codelab.css
table {
width: 100%;
border-collapse: collapse;
}
tr {
border-bottom: 1pt solid #d1d1d1;
}
th, td {
padding: 8px;
text-align: left;
}
7. Scrivi la configurazione JSON
La configurazione della visualizzazione definisce gli attributi di dati e stile supportati e richiesti dalla visualizzazione. Questa visualizzazione in questo codelab richiede una dimensione e una metrica e ha un elemento di stile per selezionare un colore di riempimento. Scopri di più su dimensioni e metriche.
Copia il seguente codice e salvalo come viz-codelab.json.Per scoprire di più sulle proprietà che puoi configurare, consulta il riferimento alla configurazione delle visualizzazioni della community.
viz-codelab.json
{
"data": [
{
"id": "concepts",
"label": "Concepts",
"elements": [
{
"id": "tableDimension",
"label": "Dimension",
"type": "DIMENSION",
"options": {
"min": 1,
"max": 1
}
},
{
"id": "tableMetric",
"label": "Metric",
"type": "METRIC",
"options": {
"min": 1,
"max": 1
}
}
]
}
],
"style": [
{
"id": "header",
"label": "Table Header",
"elements": [
{
"type": "FILL_COLOR",
"id": "headerBg",
"label": "Header Background Color",
"defaultValue": "#e0e0e0"
}
]
}
]
}
8. Crea un progetto e un bucket Cloud Storage
Passaggio 1: crea un progetto Google Cloud (GCP) o utilizzane uno esistente.
Passaggio 2: crea un bucket GCP. La classe di archiviazione consigliata è Regional. Visita la pagina Prezzi di Cloud Storage per i dettagli sui livelli senza costi. Nota: è improbabile che l'archiviazione delle visualizzazioni comporti costi per la classe di archiviazione regionale.
Passaggio 3: annota il nome/il percorso del bucket, a partire dalla sezione dopo Buckets/. Il percorso viene chiamato "ID componente" in Looker Studio e viene utilizzato per identificare e implementare una visualizzazione.
9. Scrivi il file manifest.json
Il file manifest fornisce informazioni sulla posizione e sulle risorse della visualizzazione. Deve essere denominato "manifest.json" e deve trovarsi nel bucket/percorso creato nel passaggio precedente, lo stesso percorso utilizzato per l'ID componente.
Copia il seguente codice in un editor di testo e salvalo come manifest.json.
Per saperne di più sul manifest, consulta la documentazione di riferimento al manifest.
manifest.json
{
"name": "Community Visualization",
"logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
"organization": "Looker Studio Codelab",
"organizationUrl": "https://url",
"termsOfServiceUrl": "https://url",
"supportUrl": "https://url",
"packageUrl": "https://url",
"privacyPolicyUrl": "https://url",
"description": "Community Visualization Codelab",
"devMode": true,
"components": [
{
"id": "tableChart",
"name": "Table",
"iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
"description": "A simple table chart.",
"resource": {
"js": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.js",
"config": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.json",
"css": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.css"
}
}
]
}
10. Carica i file di visualizzazione su Google Cloud Storage
- Carica i file
manifest.json,viz-codelab.js,viz-codelab.jsoneviz-codelab.cssnel bucket Google Cloud Storage utilizzando l'interfaccia web o lo strumento a riga di comando gsutil. Ripeti questa operazione ogni volta che aggiorni la visualizzazione.
Comandi di caricamento gsutil
gsutil cp -a public-read manifest.json gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
gsutil cp -a public-read viz-codelab.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
11. Testare la visualizzazione della community in Looker Studio
Crea un report e aggiungi i dati
Passaggio 1: copia l'URL del set di dati di esempio della visualizzazione della community. In alternativa, utilizza l'origine dati che preferisci e salta i passaggi seguenti.
Passaggio 2: accedi a Looker Studio. In alto a sinistra, fai clic su + Crea e poi seleziona Report.
Passaggio 3: viene visualizzato lo strumento editor di report con il riquadro Aggiungi dati al report aperto.
Passaggio 4: nella scheda Connessione ai dati, seleziona il connettore Fogli Google di Google.
Passaggio 5:seleziona URL e incolla l'URL del foglio Google del passaggio 1.
Passaggio 6: in basso a destra, fai clic su Aggiungi.
Passaggio 7: se ti viene chiesto di confermare Stai per aggiungere dati a questo report,fai clic su AGGIUNGI AL REPORT. Viene creato un report senza titolo e viene aggiunta una tabella predefinita al report con dati di esempio. (Facoltativo) Seleziona ed elimina la tabella predefinita in modo da avere un report vuoto.
Aggiungere la visualizzazione della community al report
Passaggio 1: nella barra degli strumenti, fai clic su Visualizzazioni e componenti della community 
.
Passaggio 2: fai clic su + Scopri di più per aprire la Galleria della community.
Passaggio 3: fai clic su Crea la tua visualizzazione.
Passaggio 4: in Verifica e aggiungi la tua visualizzazione della community, inserisci il Percorso manifest e fai clic su Invia. Il percorso del manifest è il nome e il percorso del bucket Google Cloud Storage che punta alla posizione del manifest della visualizzazione, con il prefisso gs://.. Ad esempio: gs://community-viz-docs/viz-codelab. Se hai inserito un percorso manifest valido, dovrebbe essere visualizzata una scheda di visualizzazione.
Passaggio 5: fai clic sulla scheda della visualizzazione per aggiungerla al report.
Passaggio 6: se richiesto, fornisci il tuo consenso per consentire il rendering della visualizzazione.
Passaggio 7: (facoltativo) aggiorna la dimensione e la metrica selezionate per la tabella. Se utilizzi il set di dati di esempio fornito, imposta la dimensione su Paese e la metrica su Popolazione. Ciò non avrà alcun effetto sulla visualizzazione fino a quando non verrà trattata più avanti nel codelab.
Il riquadro delle proprietà sul lato destro riflette gli elementi configurati in viz-codelab.json.
Nel riquadro Configurazione, la visualizzazione consente una dimensione e una metrica.
Nel riquadro Stile, la visualizzazione ha un solo elemento per lo stile dell'intestazione della tabella. A questo punto, il controllo dello stile non avrà alcun effetto sulla visualizzazione finché il codice di visualizzazione non verrà aggiornato in un passaggio successivo. Nota: vedrai opzioni di stile aggiuntive per la visualizzazione che non hai definito nel file di configurazione. Questo è previsto, poiché tutte le visualizzazioni hanno un insieme di controlli comuni disponibili automaticamente.
12. Visualizzare i dati come tabella
In questa sezione, aggiornerai la visualizzazione in modo che mostri il set di dati di esempio della visualizzazione della community come tabella.
I dati da visualizzare sono disponibili nell'oggetto tables e sono strutturati in base alla trasformazione specificata dalla visualizzazione. In questo codelab la visualizzazione richiedeva il formato tabella (tableTransform), che include un oggetto headers e un oggetto rows che contiene tutti i dati necessari per il rendering di una tabella.
Passaggio 1: sostituisci i contenuti di viz-codelab-src.js con il codice che segue.
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Create the table.
const table = document.createElement('table');
const tableHeader = document.createElement('thead');
const tableBody = document.createElement('tbody');
data.tables.DEFAULT.headers.forEach(function (column) {
const tableColumn = document.createElement('th');
tableColumn.textContent = column.name;
tableHeader.appendChild(tableColumn);
});
data.tables.DEFAULT.rows.forEach(function(row) {
const tableRow = document.createElement('tr');
row.forEach(function(cell) {
const tableCell = document.createElement('td');
if (typeof cell == 'number') {
tableCell.textContent = new Intl.NumberFormat().format(cell);
} else {
tableCell.textContent = cell;
}
tableRow.appendChild(tableCell);
});
tableBody.appendChild(tableRow);
});
table.appendChild(tableHeader);
table.appendChild(tableBody);
// Render the table.
container.appendChild(table);
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
Passaggio 2: prepara il file bundle JavaScript, quindi carica e sovrascrivi i file di visualizzazione in Google Cloud Storage.
Passaggio 3: aggiorna il report di Looker Studio per ricaricare e testare la visualizzazione della community. La tabella ora esegue il rendering dei dati (ovvero del foglio Google) e mostra le colonne di intestazione in base alla dimensione e alla metrica selezionate. Ridimensiona la visualizzazione per vedere tutte le righe.
13. Applicare dinamicamente le modifiche allo stile
In questa sezione, aggiornerai la visualizzazione per applicare lo stile all'intestazione della tabella in base al colore di riempimento selezionato nel riquadro Stile.
Lo stato di tutti gli elementi di stile è disponibile nell'oggetto style, in cui ogni chiave dell'elemento è definita in base alla configurazione dello stile di visualizzazione (viz-codelab.json). Per questa sezione, otterrai il colore di riempimento selezionato e lo utilizzerai per aggiornare il colore di sfondo dell'intestazione della tabella.
Passaggio 1: sostituisci il codice nel file viz-codelab-src.js con il codice riportato di seguito.
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Create the table.
const table = document.createElement('table');
const tableHeader = document.createElement('thead');
const tableBody = document.createElement('tbody');
data.tables.DEFAULT.headers.forEach(function (column) {
const tableColumn = document.createElement('th');
tableColumn.textContent = column.name;
tableHeader.appendChild(tableColumn);
});
data.tables.DEFAULT.rows.forEach(function(row) {
const tableRow = document.createElement('tr');
row.forEach(function(cell) {
const tableCell = document.createElement('td');
if (typeof cell == 'number') {
tableCell.textContent = new Intl.NumberFormat().format(cell);
} else {
tableCell.textContent = cell;
}
tableRow.appendChild(tableCell);
});
tableBody.appendChild(tableRow);
});
table.appendChild(tableHeader);
table.appendChild(tableBody);
// Set header color based on style control.
tableHeader.style.backgroundColor = data.style.headerBg.value.color;
// Render the table.
container.appendChild(table);
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
Passaggio 2: prepara il file bundle JavaScript, quindi carica e sovrascrivi i file di visualizzazione in Google Cloud Storage.
Passaggio 3: aggiorna il report di Looker Studio per ricaricare e testare la visualizzazione della community.
Passaggio 4: nel riquadro Stile, utilizza il controllo di stile Colore di sfondo dell'intestazione per modificare il colore di sfondo dell'intestazione della tabella.
Complimenti! Hai creato una visualizzazione della community in Looker Studio. Siamo arrivati alla fine di questo codelab. Ora vediamo quali sono i passaggi successivi che puoi intraprendere.
14. Passaggi successivi
Estendere la visualizzazione
- Scopri di più sui dati e sui formati disponibili per la visualizzazione.
- Scopri di più sugli elementi di stile disponibili e aggiungi stili aggiuntivi alla visualizzazione.
- Aggiungere interazioni alla visualizzazione
- Scopri come sviluppare una visualizzazione in locale
Fare di più con le visualizzazioni della community
- Consulta i riferimenti per la libreria helper dscc, il manifest e il file di configurazione.
- Invia la tua visualizzazione alla nostra Galleria delle visualizzazioni della community.
- Crea un connettore della community per Looker Studio.
Risorse aggiuntive
Di seguito sono riportate varie risorse a cui puoi accedere per approfondire il materiale trattato in questo codelab.
Tipo di risorsa | Funzionalità utente | Funzionalità per sviluppatori |
Documentazione | ||
Notizie e aggiornamenti | Registrati in Looker Studio > Impostazioni utente | |
Fai domande | ||
Esempi |