Utilizza un blocco grafico per creare visualizzazioni di dati sul tuo sito. I grafici sono ideali per spiegare le relazioni tra diverse serie di dati in modo convincente. È possibile creare e modificare grafici a barre, grafici a linee e grafici a torta.
Chart Blocks are a good alternative to embedding static images of charts created in programs outside of Squarespace. The charts responsively resize to ensure they look great in multiple screen sizes, and you can update the data any time.
Suggerimento: questa guida spiega come aggiungere grafici al tuo sito. Per aggiungere una tabella con colonne e righe, puoi aggiungere codice personalizzato. Per maggiori informazioni, vedi questo post nello Squarespace Forum.
Nota: le personalizzazioni del codice non rientrano nell'ambito della nostra assistenza. Ciò significa che non possiamo fornire assistenza in relazione alla configurazione o alla risoluzione dei problemi.
Prima di iniziare
We recommend preparing data in a .csv in a spreadsheet program like Excel or Google Sheets. Ensure that columns and rows have headers so they translate easily into headers in the block.
Aggiungere un Blocco grafico
Per aggiungere un Blocco grafico:
- Clicca su Modifica su una pagina o su un post.
- Clicca su un punto di inserimento o sull'icona +. Per maggiori dettagli su questi primi step, visita Aggiungere contenuto con blocchi.
- Clicca su Grafico a barre, Grafico a linee o Grafico a torta. L'editor grafico si apre e visualizza un'anteprima del grafico con il contenuto dei segnaposto.
- Usa le schede Dati o Importazione/Esportazione per aggiungere dati.
- Usa la scheda Design per progettare il grafico.
- Clicca su Apply per salvare le modifiche.
Per istruzioni dettagliate, consulta le sezioni seguenti.
Layout Blocco grafico
Ecco alcuni esempi di ciascun layout Blocco grafico. Puoi modificare il layout nella scheda Design del Blocco grafico. Mentre selezioni un layout, vedrai un'anteprima della pagina. Potrebbe essere necessario riformattare i dati per meglio adattarsi al nuovo layout.
I grafici a barre vengono in genere utilizzati per confrontare valori e/o tenere traccia delle modifiche nel tempo. Questo Blocco grafico a barre mostra le vendite di biglietti in base alla località nell'arco di tre mesi. Ogni colore della barra rappresenta un anno diverso.
I grafici a linee vengono in genere utilizzati per visualizzare le modifiche nel tempo. Avendo più linee, è possibile confrontare le variazioni tra diversi argomenti. Questo Blocco grafico linea mostra il numero di iscritti nell'arco di sei mesi. Ogni riga rappresenta un anno diverso.
I grafici a torta sono in genere utilizzati per confrontare i risultati di sondaggi, preferenze o percentuali, in cui i dati vengono rappresentati come "fette" di una torta. Questo Blocco grafico a torta mostra il tipo di torte preferite sulla base dei risultati di un sondaggio.
Aggiungere dati
Dopo aver scelto il tipo di grafico, è possibile utilizzare la scheda Importa/Esporta per importare dati da un file CSV oppure la scheda Dati per aggiungerli manualmente.
Nota: è possibile aggiungere fino a 25 righe e 25 colonne. Immettere solo numeri. L'editor converte tutti i simboli del dollaro ($) in 0.
Option 1 - Copy data from a .csv
Se hai un foglio di calcolo con i dati, puoi copiare e incollarlo da un file .cvs di testo normale . Consigliamo questo metodo, soprattutto se ci sono molti dati e si ha familiarità con la costruzione di fogli di calcolo in Excel o Google Sheet.
Tip: In your spreadsheet program, use column and row headers to create labels for the chart. You’ll then open the .csv in a plain text editor since the block can’t import cells from a spreadsheet.
- Tenere aperto l'editor Blocchi grafico.
- In your spreadsheet program, save your data as a .csv file.
- Open the file in a plain text editor like Notepad or TextEdit.
- Evidenzia tutto e copia il testo.
- Nell'editor dei blocchi, fai clic sulla scheda Importazione / Esportazione.
- Eliminare i dati di segnaposto nel campo Dati grafico.
- Paste the text you copied from the .csv.
- Clicca su Aggiorna, poi su Conferma nel messaggio che appare.
- The chart preview will refresh with new data.
I dati nella scheda Importazione / Esportazione dovrebbero essere simili a:
Option 2 - Enter or edit data manually
È possibile costruire il grafico da zero inserendo le righe una ad una nell'editor blocchi. Utilizzare questa opzione se non si dispone di dati già esistenti o se il grafico è abbastanza semplice. È possibile seguire questi passaggi anche per modificare qualsiasi dato dopo averlo importato.
- Nella scheda Dati dell'editor di blocchi, rimuovere le righe provvisorie trascinando e rilasciandole nel cestino che appare.
- Clicca sull'icona + nella parte superiore destra per aggiungere nuove colonne e intestazioni di colonna. I Blocchi grafico possono avere solo due colonne.
- Clicca sull'icona + nella parte inferiore sinistra per aggiungere nuove righe e intestazioni di riga.
- Fare clic in una cella per immettere nuovi dati o sostituire i dati provvisori. Riempire tutte le celle. Mentre si immettono dati, è possibile aggiornare l'anteprima del grafico.
Tip: Navigate between cells and rows with the Tab key, just like in any spreadsheet program.
- Verificare Capovolgi gli assi X e Y per modificare la modalità di tracciatura dei dati. Non è consigliabile per i Blocchi grafico a torta.
Suggerimenti per la formattazione
Il modo in cui vengono formattati i dati dipende dal tipo di blocco grafico utilizzato. Per ulteriori informazioni sulla formattazione di ogni grafico, segui questi suggerimenti.
Ogni riga nei Blocchi grafico a barre rappresenta una barra o oggetto sull'asse X del grafico. Ciò è riservato agli argomenti principali che si stanno confrontando.
Ogni nuova colonna rappresenta la misura che si sta confrontando tra gli argomenti. Ogni nuova colonna crea una nuova sezione verticale nel grafico.
Per creare un semplice confronto tra argomenti, aggiungere una colonna per creare una barra per ciascun argomento. Per confronti multipli tra argomenti, aggiungere più colonne.
Altri suggerimenti
- Non è possibile creare un grafico a barre impilato in questo momento.
- Il titolo, la didascalia e la legenda non possono essere spostati intorno al blocco.
- I numeri sull'asse Y possono essere arrotondati automaticamente. Non è possibile modificare questa impostazione.
- Per ridimensionare i Blocchi grafico a barre, visitare la pagina Ridimensionare i blocchi.
- Sul sito, i suggerimenti vengono visualizzati al passaggio del mouse e mostrano i dettagli di un punto dati.
L'asse X (creato da righe) nei Blocchi grafico a linee è in genere utilizzato per gli intervalli. Ogni colonna nei dati crea un nuovo intervallo nella tabella.
L'asse Y (creato da colonne) è in genere per il valore che si sta monitorando nel tempo (ad esempio: vendite, ricavi o popolazione). Ogni colonna nei dati crea una nuova riga nella tabella.
Se stai confrontando più righe, è possibile aggiungere più colonne.
Altri suggerimenti
- Non è possibile aggiungere incertezze o previsioni (linee grigie o tratteggiate che anticipano le tendenze).
- Il titolo, la didascalia e la legenda non possono essere spostati intorno al blocco.
- I numeri sull'asse Y possono essere arrotondati automaticamente. Non è possibile modificare questa impostazione.
- Per ridimensionare i Blocchi grafico a linee, visitare la pagina Ridimensionare i blocchi.
- Sul sito, i suggerimenti vengono visualizzati al passaggio del mouse e mostrano i dettagli di un punto dati.
I blocchi grafico a torta sono progettati per confrontare fino a cinque elementi. Ogni tavolozza include cinque colori che poi vengono ripetuti.
I dati devono contenere solo due colonne, in cui la prima colonna contiene un'etichetta e la seconda colonna contiene un valore numerico che rappresenta quell'etichetta. Nell'esempio seguente, la prima colonna contiene l'elenco delle torte mentre la seconda colonna contiene il numero di persone a cui piace una determinata torta.
Altri suggerimenti
- Non è consigliabile invertire gli assi X e Y.
- Il titolo, la didascalia e la legenda non possono essere spostati intorno al blocco.
- L'etichetta per ciascun articolo è progettata per due o tre parole al massimo. Se desideri inserire nomi più lunghi o più informazioni per ciascun articolo, utilizza un Blocco di testo sotto il grafico per spiegare le etichette in modo più dettagliato.
- Altri testi o caratteri aggiunti ai valori numerici nella seconda colonna, come i simboli di percentuale, non saranno visualizzati sul tuo sito live.
- Per ridimensionare i Blocchi grafico a torta, visitare la pagina Ridimensionare i blocchi.
- Sul tuo sito live, i dettagli di ciascuna "fetta" del grafico vengono visualizzati solo al passaggio del mouse.
Disegnare il grafico
Nella scheda Design è possibile aggiungere del testo personalizzato, visualizzare una legenda e scegliere una tavolozza di colori. Per ulteriori informazioni su queste opzioni di progettazione, consultare questa tabella:
| Opzioni di design | Utilizzare questo per |
| Titolo del grafico | Aggiungere un titolo per il grafico. Consigliamo di mantenere il titolo breve, come ad esempio "Vendita biglietti 2019". |
|
Didascalia |
Aggiungere una didascalia da visualizzare sotto il grafico. Questa didascalia è utile per la citazione di fonti, date, per fornire spiegazioni dettagliate e/o dichiarazioni di non responsabilità. |
| Mostra legenda | Visualizza le etichette dati in una legenda. |
|
Tavolozza colori |
Scegli una combinazione di colori per il grafico da una delle numerose opzioni preimpostate per aiutarti a creare un aspetto coerente. Ogni opzione ha cinque colori. Al momento non è possibile personalizzare con colori specifici i punti dati o gli assi del grafico. |
Definire lo stile del testo
Utilizza Stili sito per modificare il tipo di carattere e il colore del testo del blocco. La modalità di definizione dello stile del testo dipende dalla versione di Squarespace del tuo sito.
In tutti i grafici:
- Tipo di carattere del titolo - Segue Intestazioni
- Colore titolo - segue Intestazione (Grande)
- Dimensioni titolo - segue Intestazione 2
- Tipo di carattere legenda - segueParagrafi
- Colore legenda - segue Paragrafo (Medio)
- Dimensioni legenda - segue Paragrafo 2
- Tipo di carattere didascalia - segue Paragrafied è sempre in corsivo
- Colore didascalia - segueParagrafo (Medio)
- Dimensioni didascalia - segueParagrafo 2
Tutto il testo del grafico segue i tweak Intestazione e Testo. Le opzioni esatte variano in base al modello. Per maggiori informazioni, consulta la guida ai tweak di stile del tuo modello.
Esporta i dati del grafico
Per eseguire il backup dei dati in un file .csv al di fuori di Squarespace:
- Nel Menu Home, fai clic su Pagine.
- Clicca su Modifica nella pagina o post in cui il Blocco grafico viene visualizzato.
- Fai clic su Modifica nel blocco grafico.
- Fai clic sulla scheda Importa/Esporta.
- Copia i dati nel campo Dati grafico.
- Paste the data into a plain text editor.
- Save the file as a .csv. This converts the file into a spreadsheet.