wiki

Strumenti Utente

Strumenti Sito

Traccia:
sviluppo:itacharts

Differenze

Queste sono le differenze tra la revisione selezionata e la versione attuale della pagina.

Link a questa pagina di confronto

Entrambe le parti precedenti la revisioneRevisione precedente
Prossima revisione		Revisione precedente
sviluppo:itacharts [2017/06/13 16:20] – f.margiottasviluppo:itacharts [2018/03/19 10:45] (versione attuale) – modifica esterna 127.0.0.1
Linea 42: Linea 42:
   * **$options**: il parametro deve essere un oggetto della classe itaChartsOptions, rappresenta le opzioni del grafico.   * **$options**: il parametro deve essere un oggetto della classe itaChartsOptions, rappresenta le opzioni del grafico.
  
 +==== setCustomParameters() ====
 +Permette di impostare parametri addizionali liberi.
 +Questo metodo prende il seguente parametro:
 +  * **$parameters**: Il parametro deve essere un oggetto di tipo stdClass avente la struttura dei parametri aggiuntivi che si vuole impostare.
 +
 +==== setAdditionalCode() ====
 +Permette di aggiungere del codice al termine della creazione del chart, in modo da poter applicare plugin o fare altre operazioni avanzate.
 +Questo metodo prende il seguente parametro:
 +  * **$code**: Stringa contenente il codice che si vuole aggiungere. La variabile contenente l'oggetto ChartJS si chiama '//<container>//_Chart', laddove //<container>// è l'id del div che contiene il grafico.
 ---- ----
  
Linea 61: Linea 70:
   * **$color**: Stringa o Array di stringhe. Rappresenta il colore del dataset, se viene passato un array questo dovrà avere tanti elementi quanti sono gli elementi del dataset, così facendo ad ogni elemento del dataset verrà assegnato un colore differente. I colori sono rappresentabili in diverse forme: **#RRGGBB**, **#RGB**, **rgba(r,g,b,a)**, **rgb(r,g,b)**, **testuale** (es: red, green, etc..)   * **$color**: Stringa o Array di stringhe. Rappresenta il colore del dataset, se viene passato un array questo dovrà avere tanti elementi quanti sono gli elementi del dataset, così facendo ad ogni elemento del dataset verrà assegnato un colore differente. I colori sono rappresentabili in diverse forme: **#RRGGBB**, **#RGB**, **rgba(r,g,b,a)**, **rgb(r,g,b)**, **testuale** (es: red, green, etc..)
   * **$alpha**: decimale o Array di decimali. Rappresenta il grado di trasparenza del colore di riempimento. Il valore va da 0 (completamente trasparente) a 1 (completamente opaco). Se si passa un array questo dovrà avere tanti elementi quanti sono gli elementi del dataset, così facendo ad ogni elemento del dataset verrà assegnato un valore di trasparenza differente.   * **$alpha**: decimale o Array di decimali. Rappresenta il grado di trasparenza del colore di riempimento. Il valore va da 0 (completamente trasparente) a 1 (completamente opaco). Se si passa un array questo dovrà avere tanti elementi quanti sono gli elementi del dataset, così facendo ad ogni elemento del dataset verrà assegnato un valore di trasparenza differente.
 +
 +==== setHoverBackgroundColor() ====
 +Metodo identico a //setBackgroundColor()//, setta il colore nel caso di mouse hover.
  
 ==== setBorderColor() ==== ==== setBorderColor() ====
Linea 66: Linea 78:
  
 //**N.B:** Se solo uno dei due metodi fra setBorderColor e setBackgroundColor viene richiamato il valore dell'altro viene assegnato automaticamente. Nel dettaglio i colori vengono ripresi dall'elemento che è stato settato mentre la trasparenza viene fissata a 0.8 per il bordo e 0.5 per il colore di riempimento.// //**N.B:** Se solo uno dei due metodi fra setBorderColor e setBackgroundColor viene richiamato il valore dell'altro viene assegnato automaticamente. Nel dettaglio i colori vengono ripresi dall'elemento che è stato settato mentre la trasparenza viene fissata a 0.8 per il bordo e 0.5 per il colore di riempimento.//
 +
 +==== setHoverBorderColor() ====
 +Metodo identico a //setBorderColor()//, setta il colore del bordo in caso di mouse hover
  
 ==== setBorderWidth() ==== ==== setBorderWidth() ====
Linea 71: Linea 86:
 Questo metodo prende i seguenti parametri: Questo metodo prende i seguenti parametri:
   * **$width**: valore intero che rappresenta la larghezza in pixel del bordo.   * **$width**: valore intero che rappresenta la larghezza in pixel del bordo.
 +
 +==== setHoverBorderWidth() ====
 +Metodo identico a //setBorderWidth()//, setta la larghezza del bordo in caso di mouse hover
  
 ==== setFill() ==== ==== setFill() ====
Linea 90: Linea 108:
 Il metodo non dovrebbe venir richiamato direttamente dall'utente, restituisce una rappresentazione json del dataset e delle sue opzioni che verrà poi usata da ChartJS. Il metodo non dovrebbe venir richiamato direttamente dall'utente, restituisce una rappresentazione json del dataset e delle sue opzioni che verrà poi usata da ChartJS.
  
 +----
 +
 +===== itaChartsOptions =====
 +La classe rappresenta le opzioni del grafico. Ogni grafico può avere un solo oggetto itaChartsOptions abbinato, questo è facoltativo e nel caso non venisse passato verranno prese le opzioni di default.
 +L'oggetto è formato dai seguenti metodi:
 +
 +==== __construct() ====
 +Per l'oggetto al momento della creazione vengono valorizzate tutte le opzioni disponibili dal wrapper impostate con i valori di default.
 +
 +==== setResponsive() ====
 +Il metodo permette di impostare se il grafico sarà responsive e andrà quindi a modificare le proprie dimensioni in accordo con la dimensione dell'elemento padre.
 +Questo metodo prende i seguenti parametri:
 +  * **$responsive**: valore booleano, se true l'oggetto viene impostato come responsive, altrimenti no. Di default è impostato a true.
 +
 +==== setPadding() ====
 +Il metodo permette di impostare i valori di padding del grafico, questi rappresentano essenzialmente la cornice interna che viene lasciata fra il grafico e gli altri elementi della pagina.
 +Questo metodo prende i seguenti parametri:
 +  * **$left**: valore intero, è lo spazio in pixel che viene lasciato verso sinistra
 +  * **$right**: valore intero, è lo spazio in pixel che viene lasciato verso destra
 +  * **$top**: valore intero, è lo spazio in pixel che viene lasciato verso l'alto
 +  * **$bottom**: valore intero, è lo spazio in pixel che viene lasciato verso il basso
 +**Nota**: ChartJS lavora con i canvas, il padding è effettivamente uno spazio trasparente all'interno dell'immagine generata dal canvas e non il classico padding html. 
 +
 +==== setLegendDisplay() ====
 +Il metodo permette di definire se deve venir mostrata o meno la legenda del grafico.
 +Questo metodo prende i seguenti parametri:
 +  * **$display**: valore booleano, se true viene mostrata la legenda.
 +
 +==== setLegendLabel() ====
 +Il metodo permette di definire tutta una serie di aspetti grafici della legenda.
 +Questo metodo prende i seguenti parametri:
 +  * **$boxWidth**: valore intero, rappresenta la larghezza in pixel dei quadratini della legenda.
 +  * **$fontSize**: valore intero, rappresenta la dimensione in punti del font
 +  * **$fontStyle**: stringa, rappresenta lo stile del testo, prende in input un valore fra quelli di **itaChartsOptions::ITA_CHARTS_FONT_***
 +  * **$fontColor**: stringa, rappresenta il colore del testo
 +  * **$fontFamily**: stringa, rappresenta la famiglia di font da usare, come da css
 +  * **$padding**: valore intero, rappresenta il padding in pixel fra la legenda e gli altri elementi del grafico
 +
 +==== setTitleDisplay() ====
 +Il metodo permette di definire se deve venir mostrato o meno il titolo del grafico.
 +Questo metodo prende i seguenti parametri:
 +  * **$title**: stringa, è il titolo del grafico.
 +
 +==== setTitle() ====
 +Il metodo permette di impostare il titolo del grafico.
 +Questo metodo prende i seguenti parametri:
 +  * **$display**: valore booleano, se true viene mostrato il titolo.
 +
 +==== setTitlePosition() ====
 +Il metodo permette di definire dove verrà mostrato il titolo del grafico.
 +Questo metodo prende i seguenti parametri:
 +  * **$position**: stringa, indica dove viene posizionato il titolo, accetta un valore fra quelli di **itaChartsOptions::ITA_CHARTS_***
 +
 +==== setTitleOptions() ====
 +Permette di impostare tutta una serie di opzioni relative al titolo del grafico.
 +Questo metodo prende i seguenti parametri:
 +  * **$fontSize**: valore intero, rappresenta la dimensione in punti del font
 +  * **$fontStyle**: stringa, rappresenta lo stile del testo, prende in input un valore fra quelli di **itaChartsOptions::ITA_CHARTS_FONT_***
 +  * **$fontColor**: stringa, rappresenta il colore del testo
 +  * **$fontFamily**: stringa, rappresenta la famiglia di font da usare, come da css
 +  * **$padding**: valore intero, rappresenta il padding in pixel fra la legenda e gli altri elementi del grafico
 +
 +==== setXAxis() ====
 +Permette di impostare tutta una serie di parametri relativi all'asse X del grafico.
 +Questo metodo prende i seguenti parametri:
 +  * **$display**: valore booleano, indica se mostrare o meno, graficamente, l'asse
 +  * **$type**: stringa, indica se l'asse ha una rappresentazione lineare o logaritmica (quest'ultima solo per gli assi con etichette numeriche). Accetta in input un valore fra quelli di **itaChartsOptions::ITA_CHARTS_AXIS_***
 +  * **$position**: stringa, indica dove posizionare l'asse. Accetta in input un valore fra quelli di **itaChartsOptions::ITA_CHARTS_***
 +  * **$stacked**: valore booleano, indica se, nel caso di dataset multipli, le barre devono venir sovrapposte o meno.
 +
 +==== setYAxis() ====
 +Il metodo è speculare a setXAxis() ma relativamente all'asse X, si rimanda alla documentazione di quest'ultimo.
 +
 +==== setCustomOptions() ====
 +Permette di aggiungere ulteriori opzioni in modo libero.
 +Questo metodo prende il seguente parametro:
 +  * **$options** oggetto di tipo stdClass, contiene la struttura dati delle opzioni aggiuntive che si vogliono inserire, ad esempio:
 +<code>$options = new stdClass;
 +$options->rotation = $pi;
 +$options->circumference = 15;</code>
 ---- ----
  
sviluppo/itacharts.1497370849.txt.gz · Ultima modifica: 2018/03/19 10:45 (modifica esterna)