Chart Bric porta la potenza della libreria Javascript open source grafici.js a Blocs. Con il supporto per bar, linea, torta, ciambella, polare e radar tipi di grafico, questo Bric può essere utilizzato in molti modi diversi per visualizzare un'ampia gamma di dati sul tuo sito web.
Il Chart Bric non è incluso nel pacchetto Blocs applicazione e possono essere acquistati separatamente qui.
Requisiti
Chart Bric richiede almeno MacOS 12 (Mojave) e funzionerà con entrambi Blocs 4 e 5.
Come installare
Tutti i componenti aggiuntivi possono essere installati in Blocs utilizzando il Gestore estensioni. Se non hai familiarità con l'installazione di componenti aggiuntivi, puoi seguire questa guida.
Forma
I controlli dell'aspetto vengono utilizzati per impostare l'aspetto visivo di un grafico.
Style
L'elenco a discesa dello stile può essere utilizzato per selezionare lo stile di visualizzazione di un grafico. È possibile selezionare tra Barra, Linea, Torta, Ciambella, Area polare, Radar.
disposizione
Il controllo del layout è disponibile solo per gli stili di grafico a barre e a linee. Questo menu a discesa può essere utilizzato per impostare il layout di un grafico su verticale (predefinito) o orizzontale. Questo controllo è nascosto quando è selezionato qualsiasi altro stile di grafico.
Colore di sfondo
Questo riquadro dei colori può essere utilizzato per impostare il colore di sfondo di un grafico.
Colore del testo
Questo colore può essere utilizzato per impostare il colore del testo di un grafico.
Colore bordo
Questo riquadro dei colori può essere utilizzato per impostare il colore del bordo di un grafico.
Colore griglia
Questo riquadro dei colori può essere utilizzato per impostare il colore della griglia di un grafico.
Leggenda
I controlli della legenda vengono utilizzati per impostare le caratteristiche della legenda del grafico.
Posizione
Questo menu a discesa viene utilizzato per impostare la posizione della legenda. Può essere impostato in alto, in basso, a sinistra oa destra.
Mostra legenda
Questa casella di controllo viene utilizzata per attivare o disattivare la visibilità della legenda del grafico.
Dati
I controlli dei dati vengono utilizzati per impostare i dati che vengono popolati in un grafico. A seconda dello stile del grafico che si sta creando, è possibile popolare set di dati sia singoli che multipli in un singolo grafico.
per il tuo brand
Questo campo di input di testo viene utilizzato per impostare l'array di etichette utilizzato per popolare il contenuto dell'asse X di Y di un grafico. Questo valore deve essere costituito dallo stesso numero di elementi del campo Valori. Ogni valore deve essere separato da una virgola.
Etichetta codici brevi
Blocs supporta la generazione rapida di array di etichette per tipi di dati comuni come i mesi o l'anno. I seguenti codici funzione possono essere utilizzati nel campo Etichette per generare rapidamente i dati delle etichette corrispondenti, ad esempio digitando *q1 nel campo Etichette verranno generati automaticamente gennaio, febbraio e marzo.
*mesi = Gen, Feb, Mar, Apr, Mag, Giu, Lug, Ago, Set, Ott, Nov, Dic
*q1 = gennaio, febbraio, marzo
*q2 = aprile, maggio, giugno
*q3 = luglio, agosto, settembre
*q4 = ottobre, novembre, dicembre
*sociali = Facebook, Instagram, LinkedIn, Reddit, SnapChat, TikTok, Twitter, Youtube
*cripto = Bitcoin, Ethereum, Tether, XRP, Cardano, Dodgecoin, Solona, Shib, Litecoin, Stellar
*Europa = elenca i paesi europei
*stati = elenca gli Stati americani
set di dati
Questo menu a discesa può essere utilizzato per selezionare un set di dati, rendendo possibile la modifica dei valori e dei colori ad esso applicati. Questa opzione consente inoltre di aggiungere e rimuovere set di dati aggiuntivi.
etichetta
Questo campo di testo può essere utilizzato per impostare l'etichetta utilizzata nella legenda per il set di dati corrente.
Valori
Questo campo di input di testo viene utilizzato per impostare l'array di valori per il set di dati corrente utilizzato per popolare il contenuto di un grafico. Questa matrice di valori deve essere composta dallo stesso numero di elementi del campo Etichette. Ogni valore deve essere separato da una virgola.
Colore di riempimento
Questo riquadro colore può essere utilizzato per impostare il colore di riempimento di un set di dati. Questa opzione è disponibile solo per i grafici a barre, linee e radar.
Colore bordo
Questo riquadro dei colori può essere utilizzato per impostare il colore del bordo di un set di dati. Questa opzione è disponibile solo per i grafici a barre, a linee ea radar.
Seg Colori
Questo campo di input di testo viene utilizzato per impostare l'array del valore del colore per il set di dati corrente utilizzato per popolare il contenuto di un grafico. Questa matrice di valori deve essere composta dallo stesso numero di elementi del campo Etichette. Ogni valore deve essere separato da una virgola. È possibile utilizzare valori di colore HEX o RGBA. Questa opzione è disponibile solo per gli stili di grafico a torta, ad anello e ad area polare.
Puoi leggere di più sui valori di colore HEX e RGBA qui.
Scala X
I controlli Scala X vengono utilizzati per personalizzare l'aspetto dell'asse X di un grafico.
etichetta
Questo campo di immissione testo può essere utilizzato per impostare l'etichetta per l'asse X di un grafico.
Mostra scala
Questa casella di controllo viene utilizzata per attivare o disattivare la visibilità dei dettagli dell'asse X di un grafico.
Scala Sì
I controlli Scala Y vengono utilizzati per personalizzare l'aspetto dell'asse Y di un grafico.
etichetta
Questo campo di immissione testo può essere utilizzato per impostare l'etichetta per l'asse Y di un grafico.
Valore minimo
Questo campo di immissione testo può essere utilizzato per impostare il valore minimo preferito per l'asse Y di un grafico. Questo valore deve essere numerico e può essere positivo (100) o negativo (-100).
Valore massimo
Questo campo di immissione testo può essere utilizzato per impostare il valore massimo preferito per l'asse Y di un grafico. Questo valore deve essere numerico e può essere positivo (100) o negativo (-100).
Dimensione del passo
Questo campo di immissione testo può essere utilizzato per impostare la dimensione del passo numerico dell'asse Y dei grafici. La modifica di questo valore influirà sui numeri che corrono sull'asse Y. Il valore del passo predefinito è 20, ciò significa che il grafico mostrerà un passo sull'asse Y con incrementi di 20, ad esempio 20, 40, 60, 80. Se questo valore viene modificato in 10, visualizzerà il doppio dei passi elencandoli 10, 20, 30, 40, 50, 60, 70, 80. Questo valore deve essere numerico.
Mostra scala
Questa casella di controllo viene utilizzata per attivare o disattivare la visibilità dell'asse Y di un grafico.
Animazione
I controlli di animazione possono essere utilizzati per personalizzare il modo in cui un grafico viene animato quando viene visualizzato in anteprima su un sito Web live.
Le animazioni dei grafici possono essere visualizzate solo in modalità anteprima o quando un sito viene esportato/pubblicato e caricato tramite un browser web.
Ritardo
Questo campo di immissione testo viene utilizzato per personalizzare il ritardo dell'animazione di un grafico. Il valore deve essere numerico ed è misurato in millisecondi, ad esempio 1000 = 1 secondo.
Durata
Questo campo di immissione testo viene utilizzato per personalizzare la durata dell'animazione di un grafico. Il valore deve essere numerico ed è misurato in millisecondi, ad esempio 1000 = 1 secondo.. Se non hai bisogno di alcuna animazione su un grafico, imposta questo valore su 0.