COMPONENTI GRAFICI (Charts Components)

Il passaggio da DATI a INFORMAZIONI avviene attraverso gli strumenti GRAFICI.

 

Contenuti:

App Inventor 2 Kodular ThunkableX
   

GRAFICI

Il componente Grafico traccia i dati provenienti dai componenti Dati collegati. Sono disponibili cinque diversi tipi di grafico, inclusi Linea, Area, Dispersione, Barra e Torta, che possono essere modificati dalla proprietà Tipo. Il componente Grafico stesso ha varie altre proprietà che modificano l’aspetto del grafico, come {Description, GridEnabled,

Proprietà

BackgroundColor color

Specifica il colore di sfondo del grafico come numero intero alfa-rosso-verde-blu.

Description text

Specifica il testo visualizzato dall’etichetta di descrizione all’interno del grafico. Specificando una stringa vuota (”) non verrà visualizzata alcuna etichetta.

GridEnabled boolean

Modifica la visibilità della griglia del grafico, se il tipo di grafico è impostato su un grafico con un asse (si applica ai tipi di grafico ad area, a barre, a linee, a dispersione).

Height number blocks-only

Specifica l’altezza verticale del grafico, misurata in pixel.

HeightPercent number write-only, blocks-only

Specifica l’altezza verticale del grafico come percentuale dell’altezza dello schermo.

Labels list blocks-only

Modifica le etichette dell’asse X del grafico nell’elenco specificato, se il tipo di grafico è impostato su un grafico con un asse.

La prima voce della Lista corrisponde al valore x minimo dei dati, la seconda al valore x minimo + 1 e così via.

Se non viene specificata un’etichetta per un valore x, viene utilizzato un valore predefinito (il valore x del segno di spunta dell’asse in quella posizione).

LabelsFromString text  write-only, designer-only

Specifica le etichette da impostare sull’asse X del grafico, a condizione che la vista corrente sia un grafico con un asse X. Le etichette sono specificate come una singola stringa di valori separati da virgola (il che significa che ogni valore è separato da una virgola). Vedere Etichette per maggiori dettagli su come le etichette vengono applicate al grafico.

LegendEnabled boolean

Modifica la visibilità della legenda del grafico.

PieRadius number  write-only, designer-only

Imposta il raggio della torta del grafico. Se il tipo corrente non è il grafico a torta, il valore non ha effetto.

TypeChartType designer-only

Specifica il tipo di grafico, che determina come visualizzare i dati.

Visible boolean

Specifica se il grafico deve essere visibile sullo schermo. Il valore è vero se il grafico è visualizzato e falso se nascosto.

Width number  designer-only

Specifica la larghezza orizzontale del grafico, misurata in pixel.

WidthPercent number  write-only, designer-only

Specifica la larghezza orizzontale del grafico come percentuale della larghezza dello schermo.

Eventi

EntryClick( anyx, numbery)

Indica che l’utente ha fatto clic su una voce di dati nel Grafico. Vengono riportate le serie specifiche, insieme ai suoi valori xey.

Metodi

Nessuno

Grafici bidimensionali (ChartsData2D)

Un componente ChartData2D rappresenta una singola serie di dati bidimensionale nel componente Grafico, ad esempio una singola linea nel caso di un grafico a linee o una singola barra nel caso di un grafico a barre. La componente Dati è responsabile della gestione di tutti i dati del Grafico. Le voci del componente Dati corrispondono a un valore x e a y. Il componente viene collegato direttamente a un componente del grafico trascinandolo sul grafico.

Proprietà

Color color

Specifica il colore della serie di dati come un numero intero alfa-rosso-verde-blu.

Colors list blocks-only

Specifica i colori della serie di dati come un elenco di numeri interi alfa-rosso-blu-blu.

Se ci sono più dati di quelli che ci sono colori, i colori saranno alternati in ordine. Per esempio. Se ci sono due colori rosso e blu, i colori verranno applicati nell’ordine: rosso, blu, rosso, blu, …

DataFilexColumn text write-only, designer-only

Valore utilizzato durante l’importazione di dati da una sorgente componente del file di dati. Il valore rappresenta la colonna da utilizzare dal file di dati per le voci X della serie di dati. Ad esempio, se il primo valore di una colonna è “tempo” e viene specificato un valore di colonna di “tempo”, quella colonna verrà utilizzata per i valori X. Se un valore qui non è specificato, verranno invece generati i valori predefiniti per i valori X.

DataFileyColumn text write-only, designer-only

Valore utilizzato durante l’importazione di dati da una sorgente componente del file di dati. Il valore rappresenta la colonna da utilizzare dal file di dati per le voci Y della serie di dati. Ad esempio, se il primo valore di una colonna è “temperatura” e viene specificato un valore di colonna di “temperatura”, quella colonna verrà utilizzata per i valori Y. Se un valore qui non è specificato, verranno invece generati i valori predefiniti per i valori Y.

DataSourceKey text write-only, designer-only

Imposta l’identificatore della chiave dell’origine dati per il valore da importare dall’origine dati allegata.

Un esempio è il tag del componente tinyDB, che identifica il valore.

La proprietà è una proprietà solo progettista e deve essere modificata dopo aver impostato il componente di origine del componente dati del grafico.

Un elenco completo dei valori applicabili per ciascuna fonte compatibile è il seguente:

  • Per TinyDB e CloudDB, questo è il valore del tag.
  • Per l’accelerometersensor, il valore dovrebbe essere uno dei seguenti: x y o z
  • Per il giroscopi, il valore dovrebbe essere uno dei seguenti: x y o z
  • Per le posizioni, il valore dovrebbe essere uno dei seguenti: latitudine, longitudine, altitudine o velocità
  • Per gli orientamenti, il valore dovrebbe essere uno dei seguenti: pitch, azimut o roll
  • Per il contapassi, il valore dovrebbe essere uno dei seguenti: W
  • Per il VesimitySensor, il valore dovrebbe essere la distanza.
  • Per il BluetoothClient, il valore rappresenta il prefisso da rimuovere dal valore. Ad esempio, se i valori sono disponibili nel formato “T: 12”, il prefisso può essere specificato come “T:” e il prefisso verrà quindi rimosso dai dati. Non è possibile specificare alcun valore se vengono restituiti valori puramente numerici.

ElementsFromPairs text write-only, designer-only

Elenco di elementi separati da virgola da utilizzare per la serie di dati. I valori sono formattati come segue: X1, Y1, X2, Y2, X3, Y3. I valori vengono presi in coppia e una voce viene formata dai valori X e Y.

Label text

Specifica il testo per l’etichetta della serie dati.

LineType LineType write-only, designer-only

Modifica il tipo di riga della serie di dati, a condizione che il componente dati sia collegato a un grafico che ha il tipo impostato su un grafico basato sulla linea (si applica ai tipi di grafici area e di linea). I tipi validi includono lineari, curvi o graduali.

PointShape PointStyle write-only, designer-only

Modifica la forma del punto della serie di dati, a condizione che il componente dati sia collegato a un grafico che ha il tipo impostato sul grafico a dispersione. I tipi validi includono cerchio, quadrato, triangolo, croce, x.

Source component write-only, designer-only

Imposta l’origine da utilizzare per il componente dati. Le scelte valide includono accelerometersensor, BluetoothClient, CloudDB, DataFile, GyroscopEsensor, LocationesSnro, Orientamentsensor, Pavapatometro, ProximitySensor TinyDB e componenti Web. Il valore di origine richiede inoltre le proprietà valide di DataSourceValue, WebColumn o DataFileColumn, a seconda del tipo di origine allegata (le proprietà richieste vengono visualizzate nel menu Proprietà dopo la modifica della sorgente).

Se i dati identificati dal DataSourceKey vengono aggiornati nel componente dell’origine dati allegata, i dati vengono anche aggiornati nel componente dati del grafico.

SpreadsheetUseHeaders boolean write-only, designer-only

Se controllato, la prima riga del foglio di calcolo verrà utilizzata per interpretare i valori della colonna X e Y. Altrimenti, le colonne X e Y dovrebbero essere un riferimento a colonna, come A o B.

SpreadsheetXColumn text write-only, designer-only

Imposta la colonna per analizzare il componente del foglio di calcolo allegato per i valori X. Se una colonna non viene specificata, verranno generati i valori predefiniti per i valori X.

SpreadsheetYColumn text write-only, designer-only

Imposta la colonna per analizzare il componente del foglio di calcolo allegato per i valori Y. Se una colonna non viene specificata, verranno generati i valori predefiniti per i valori Y.

Webxcolumn text write-only, designer-only

Valore utilizzato durante l’importazione di dati da un’origine del componente Web. Il valore rappresenta la colonna da utilizzare dal Web per le voci X della serie di dati. Ad esempio, se il contenuto del Web viene recuperato in formato JSON e esiste un array con il tag “tempo”, è possibile specificare il valore della colonna “tempo” per utilizzare quell’array.

Webycolumn text write-only, designer-only

Valore utilizzato durante l’importazione di dati da un’origine del componente Web. Il valore rappresenta la colonna da utilizzare dal Web per le voci Y della serie di dati. Ad esempio, se il contenuto del Web viene recuperato in formato JSON e esiste un array con il tag “temperatura”, è possibile specificare il valore della colonna “temperatura” per utilizzare quell’array.

Eventi

EntryClick( anyx, numbery)

Indica che l’utente ha toccato un punto dati nel grafico. Vengono riportati i valori x e y della voce tappata.

Metodi

AddEntry( textx, texty)

Aggiunge una voce con il valore xey specificato. I valori possono essere specificati come testo o come numeri. Per i grafici a linee, a dispersione, ad area e a barre, entrambi i valori devono rappresentare un numero. Per i grafici a barre, il valore x viene arrotondato al numero intero più vicino. Per i grafici a torta, il valore x è un valore di testo.

ChangeDataSource( componentsource, textkeyValue)

Modifica l’origine dati del componente nell’origine del componente specificata con il valore chiave specificato. Vedere la proprietà Source per i componenti applicabili. Vedere la proprietà DataSourceKey per l’interpretazione di keyValue. Nel caso dei componenti DataFile e Web, il keyValue dovrebbe essere una stringa formattata CSV, dove il primo valore corrisponde alla colonna x e il secondo valore corrisponde al valore y.

Clear()

Rimuove tutte le voci dalla serie di dati.

booleanDoesEntryExist( textx, texty)

Restituisce un valore booleano che specifica se esiste una voce con i valori xey specificati. Il valore booleano di true viene restituito se il valore esiste e un valore false in caso contrario. Vedere AddEntry per una spiegazione dei valori di ingresso validi.

listGetAllEntries()

Restituisce tutte le voci della serie di dati. Il valore restituito è un elenco, in cui ogni elemento dell’elenco è un elenco contenente i valori della voce in ordine.

listGetEntriesWithXValue( textx)

Restituisce tutte le voci della serie di dati corrispondenti al valore x specificato. Per una descrizione del formato dell’elenco restituito, vedere GetAllEntries

listGetEntriesWithYValue( texty)

Restituisce tutte le voci della serie di dati corrispondenti al valore y specificato. Per una descrizione del formato dell’elenco restituito, vedere GetAllEntries

ImportFromCloudDB( componentcloudDB, texttag)

Importa i dati dal componente CloudDB specificato prendendo il valore identificato dal valore del tag specificato.

Il valore CloudDB previsto è un elenco formattato nello stesso modo descritto in ImportFromList.

Non sovrascrive alcun dato.

ImportFromDataFile( componentdataFile, textxValueColumn, textyValueColumn)

Importa i dati dal componente DataFile specificato prendendo la colonna x specificata per i valori x e la colonna y specificata per i valori y. Il file di origine di DataFile dovrebbe essere un file CSV o JSON.

Il superamento del test vuoto per uno qualsiasi dei parametri della colonna comporterà l’utilizzo di valori predefiniti che sono gli indici delle voci. Per la prima voce, il valore predefinito sarebbe 1, per la seconda sarebbe 2 e così via.

ImportFromList( listlist)

Importa i dati dal parametro elenco specificato nella serie di dati. L’elenco dovrebbe contenere elementi che sono anche elenchi. Ogni elemento dell’elenco dovrebbe avere 2 valori, il primo è il valore x e il secondo è il valore y. Le voci dell’elenco non valide vengono semplicemente saltate. I dati esistenti non vengono cancellati.

ImportFromSpreadsheet( componentsheet, textxColumn, textyColumn, booleanuseHeaders)

Importa i dati dal componente Foglio di calcolo specificato prendendo la colonna x specificata per i valori x e la colonna y specificata per i valori y. Prima di chiamare questa funzione, è necessario chiamare il metodo ReadSheet del componente Spreadsheet per caricare i dati. L’utilizzo dell’evento GotSheet nel componente Spreadsheet non è necessario.

Le colonne vuote vengono riempite con valori predefiniti (1, 2, 3, … per l’Entrata 1, 2, 3, …).

ImportFromTinyDB( componenttinyDB, texttag)

Importa i dati dal componente TinyDB specificato prendendo il valore identificato dal valore del tag specificato.

Il valore TinyDB previsto è un elenco formattato nello stesso modo descritto in ImportFromList.

Non sovrascrive alcun dato.

ImportFromWeb( componentweb, textxValueColumn, textyValueColumn)

Importa i dati dal componente Web specificato prendendo la colonna x specificata per i valori x e la colonna y specificata per i valori y. Prima di chiamare questa funzione, è necessario chiamare il metodo Get del componente Web per caricare i dati. L’utilizzo dell’evento gotValue nel componente Web non è necessario.

La risposta prevista del componente Web è un file in formato JSON o CSV per il funzionamento di questa funzione.

Le colonne vuote vengono riempite con valori predefiniti (1, 2, 3, … per l’Entrata 1, 2, 3, …).

RemoveDataSource()

Rimuove l’origine dati attualmente collegata dal componente Dati grafico. In questo modo non verranno inviati più aggiornamenti dall’origine dati, tuttavia i dati correnti non verranno rimossi.

RemoveEntry( textx, texty)

Rimuove una voce con il valore x e y specificato, purché esista. Vedere AddEntry per una spiegazione dei valori di ingresso validi.

 

Aggiornato al 25/09/2022
 
 

PDF Lista comparazione dei componenti di AI2 KODULAR THUNKABLEX agg.20210911

Vuoi avere più informazioni sul Coding visuale? Vai alla pagina dei Blocchi incorporati dove potrai imparare a scrivere il linguaggio di programmazione per App Inventor 2, Kodular e Thunkable X. Visita la pagina del Blog con le ultime notizie sulle le tre piattaforme. Nella pagina Documentazione troverai i collegamenti ai forum, il glossario, i link ai siti dei migliori programmatori, i download e tanti altri accessori.