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.
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 blocchi.
- Selezionare 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.
- Utilizzare la scheda Dati o Importazione/Esportazione per aggiungere dati.
- Utilizzare la scheda Design per progettare il grafico.
- Fare clic su Applica 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 selezionato il tipo di grafico, è possibile utilizzare la scheda Importazione / Esportazione per importare dati da un file .cvs o dalla scheda Dati per aggiungerli manualmente.
Note: You can add up to 25 rows and 25 columns. Enter numbers only. The editor converts all dollar signs ($) to 0s.
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.
- Select all and copy the text.
- Nell'editor dei blocchi, fai clic sulla scheda Importazione / Esportazione.
- Eliminare i dati di segnaposto nella finestra Dati grafico.
- Paste the text you copied from the .csv.
- Fare clic 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.
- Fare clic sull'icona + nella parte superiore destra per aggiungere nuove colonne e intestazioni di colonna. I Blocchi grafico possono avere solo due colonne.
- Fare clic 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.
- 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.
- 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 selezionare 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 |
Selezionare 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. |
Suggerimento: cambia i tipi di caratteri e i colori per il testo dei grafici con i tweak di stile Intestazione e Testo. Queste opzioni dipendono dal modello in uso.
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.
- Fare clic su Modifica nella pagina o post in cui il Blocco grafico viene visualizzato.
- Fare clic su Modifica nel Blocco grafico.
- Fare clic sulla scheda Importazione / Esportazione.
- Copiare i dati nella casella Dati grafico.
- Paste the data into a plain text editor.
- Save the file as a .csv. This converts the file into a spreadsheet.