Crea grafici a barre, a linee o a torta per mostrare i dati ai visitatori in un formato accattivante.
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.
I Blocchi grafico sono una buona alternativa all'incorporamento di immagini statiche di grafici creati in programmi al di fuori di Squarespace. I grafici si ridimensionano in maniera reattiva per garantire un aspetto ottimale in schermi di dimensioni diverse ed è possibile aggiornare i dati in qualsiasi momento.
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
Ti consigliamo di preparare i dati in un file .csv in un programma per fogli di calcolo come Excel o Fogli Google. Assicurati che le colonne e le righe abbiano intestazioni in modo che si traducano in intestazioni nel blocco.
Aggiungere un Blocco grafico
Per aggiungere un Blocco grafico:
- Modifica una pagina o un post, clicca su Aggiungi blocco o su un punto di inserimento, quindi clicca su Grafico. Per assistenza, visita Aggiungere contenuti con blocchi.
- Apri l'editor dei blocchi cliccando sull'icona della matita presente sul blocco.
- 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. Se il tuo sito è nella versione 7.0, fai clic su Applica per pubblicare 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 dati di questo blocco. Mentre selezioni un layout, vedrai un'anteprima della pagina. Potrebbe essere necessario ridisporre i dati in modo che si adattino al meglio al nuovo layout.
I grafici a barre vengono in genere utilizzati per confrontare valori 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, clicca su Importa/Esporta.
- Eliminare i dati di segnaposto nel campo Dati grafico.
- Paste the text you copied from the .csv.
- Clicca su Aggiorna, quindi 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 citare fonti, date, per fornire spiegazioni dettagliate, dichiarazioni di non responsabilità. |
| Mostra legenda | Visualizza le etichette dati in una legenda. |
|
Tavolozza colori |
Scegli una combinazione di colori per il grafico, scegliendo una delle nostre numerose opzioni preimpostate, in modo da creare un look omogeneo. Ogni opzione è composta da cinque colori. Al momento, non è possibile personalizzare colori specifici per i punti di 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.
Esporta i dati del grafico
Per eseguire il backup dei dati in un file .csv al di fuori di Squarespace:
- Nel Menu Home, clicca su Pagine.
- Clicca su Modifica nella pagina o post in cui il Blocco grafico viene visualizzato.
- Clicca due volte sul Blocco grafico.
- Clicca su 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.