1. Introduzione
Data Studio ti consente di creare dashboard live e interattive con visualizzazioni dei dati di grande impatto visivo, il tutto senza costi. Recupera i dati da una varietà di origini e crea report illimitati in Data Studio, con funzionalità complete di modifica e condivisione. Lo screenshot seguente è un esempio di report di Data Studio:
( Fai clic qui per visualizzare questo report di esempio in Data Studio)
Data Studio fornisce 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 le tue visualizzazioni JavaScript personalizzate in Data Studio. Puoi anche condividere le tue visualizzazioni della community con altri utenti in modo che possano utilizzarle con i propri dati.
Obiettivi didattici
In questo codelab imparerai a:
- Come funziona una visualizzazione della community di Data Studio.
- Come creare una visualizzazione della community utilizzando la libreria di assistenza ds-component (dscc).
- Come utilizzare la visualizzazione della community in un report di Data Studio.
Che cosa ti serve
Per completare questo codelab, ti serviranno:
- Accesso a internet e a un browser web.
- Un Account Google.
- Accesso a un bucket di archiviazione di 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 Data Studio?
Quale opzione descrive meglio il tuo background?
Quali librerie di visualizzazione JavaScript ti interessano?
Vai alla pagina successiva per inviare le informazioni del sondaggio.
3. Panoramica delle visualizzazioni della community
In questo codelab creerai una visualizzazione della community di grafici a tabella che supporta 1 dimensione, 1 metrica e lo stile dell'intestazione della tabella.
4. Flusso di lavoro di sviluppo delle visualizzazioni della community
Per creare una visualizzazione della community, devi avere i seguenti file in un bucket di archiviazione di Google Cloud Platform, 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 stili 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 nomi diversi, purché il nome/la posizione sia specificato nel file manifest.
5. Scrivi una visualizzazione "Hello, world!"
In questa sezione aggiungerai il codice necessario per il rendering di una semplice visualizzazione "Hello, world!".
Scrivi l'origine JavaScript della visualizzazione
Passaggio 1: scarica il file dscc.min.js dalla pagina della libreria dei componenti della community di Data 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 del bundle JavaScript
Passaggio 3: combina tutto il codice JavaScript necessario in un unico file copiando i contenuti della libreria di assistenza per la 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 di 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 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 stili 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.
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 di Cloud Storage
Passaggio 1: crea un progetto Google Cloud Platform (GCP) o utilizzane uno esistente.
Passaggio 2: crea un bucket GCP. La classe di archiviazione consigliata è Regionale. Visita la pagina Prezzi di Cloud Storage per i dettagli sui livelli senza costi. Nota: è improbabile che l'archiviazione della visualizzazione comporti costi per la classe di archiviazione Regional Storage.
Passaggio 3: prendi nota del nome/percorso del bucket, a partire dalla sezione dopo Bucket/. Il percorso viene definito "ID componente" in Data Studio e viene utilizzato per identificare e distribuire 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 del manifest.
manifest.json
{
"name": "Community Visualization",
"logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
"organization": "Data 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 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. Testa la visualizzazione della community in Data 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 Data 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 i dati di esempio. Se vuoi, seleziona ed elimina la tabella predefinita in modo da avere un report vuoto.
Aggiungi 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 + Esplora altro 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 manifest è il nome e il percorso del bucket Cloud Storage che rimanda 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 di visualizzazione per aggiungerla al report.
Passaggio 6: se richiesto, fornisci il tuo consenso per consentire il rendering della visualizzazione.
Passaggio 7: se vuoi, 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. Questa operazione non avrà alcun effetto sulla visualizzazione fino a un passaggio successivo del 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 singolo elemento per applicare lo stile all'intestazione della tabella. A questo punto, il controllo dello stile non avrà alcun effetto sulla visualizzazione fino a quando il codice di visualizzazione non verrà aggiornato in un passaggio successivo. Nota: vedrai altre opzioni di stile per la visualizzazione che non hai definito nel file di configurazione. Questo è il comportamento previsto, poiché tutte le visualizzazioni hanno un insieme di controlli comuni disponibili automaticamente.
12. Esegui il rendering dei dati come tabella
In questa sezione aggiornerai la visualizzazione per visualizzare il set di dati di esempio della visualizzazione della community come tabella.
I dati di cui eseguire il rendering sono disponibili nell'oggetto tables e sono strutturati in base alla trasformazione specificata dalla visualizzazione. In questo codelab, la visualizzazione ha richiesto il formato della tabella (tableTransform) che include un oggetto headers e un oggetto rows contenente tutti i dati necessari per il rendering di una tabella.
Passaggio 1: sostituisci i contenuti di 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);
// 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 del bundle JavaScript, quindi carica e sovrascrivi i file di visualizzazione su Google Cloud Storage.
Passaggio 3: aggiorna il report di Data Studio per ricaricare e testare la visualizzazione della community. La tabella ora esegue il rendering dei dati (ovvero il Foglio Google) e visualizza le colonne di intestazione in base alla dimensione e alla metrica selezionate. Ridimensiona la visualizzazione per visualizzare tutte le righe.
13. Applica 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 della visualizzazione (viz-codelab.json). In questa sezione, recupererai 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 del bundle JavaScript, quindi carica e sovrascrivi i file di visualizzazione su Google Cloud Storage.
Passaggio 3: aggiorna il report di Data Studio per ricaricare e testare la visualizzazione della community.
Passaggio 4: nel riquadro Stile, utilizza il controllo dello stile Colore di sfondo dell'intestazione per modificare il colore di sfondo dell'intestazione della tabella.
Complimenti! Hai creato una visualizzazione della community in Data Studio. Questo codelab termina qui. Ora vediamo quali sono i passaggi successivi che puoi intraprendere.
14. Passaggi successivi
Estendi la visualizzazione
- Scopri di più sui dati e sui formati disponibili per la visualizzazione.
- Scopri di più sugli elementi di stile disponibili e aggiungi altri stili alla visualizzazione.
- Aggiungi interazioni alla visualizzazione
- Scopri come sviluppare una visualizzazione in locale
Ottieni di più dalle visualizzazioni della community
- Esamina i riferimenti per la libreria di assistenza dscc, il manifest e il file di configurazione.
- Invia la visualizzazione alla nostra Galleria delle visualizzazioni della community.
- Crea un connettore della community per Data 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 Data Studio > Impostazioni utente | |
Fai domande | ||
Esempi |