Inizio Blog User Interface (YUIBlog)

Data di formattazione con YUI - Parte III

Nella prima parte , abbiamo visto come facilmente formattare una data con data formatter YUI e in parte II, abbiamo guardato formattazione di date per il controllo DataTable. Passiamo ora un'occhiata a come formattare date per il YUI Grafici di controllo.

È interessante notare, è stato il controllo Charts che per prima ha portato allo sviluppo del formattatore data. Stavamo costruendo un grafico di serie temporali e avevo bisogno di formattare le date in modo diverso alle varie posizioni. Date visualizzate lungo il nostro asse X doveva essere appropriata per la scala rappresentata dal grafico. Ad esempio, per i dati di spanning mesi, abbiamo voluto le etichette per essere ad un livello mese-giorno, e per i dati degli anni precedenti, abbiamo voluto le etichette per mostrare il mese e anno. Volevamo anche la didascalia del grafico per mostrare l'intera gamma di data in un formato comprensibile all'uomo come "Gennaio - Marzo 2008". Infine, il grafico aveva bisogno di un suggerimento per mostrare la data esatta per il punto di passaggio del mouse.

Potremmo o rendere tutti questi dati in stringhe data di pre-formattati utilizzando PHP sul back-end, o potremmo inviare i dati grezzi data al front-end e che JavaScript sia lo rendono adeguato. Siamo andati con la seconda opzione per ridurre la dimensione del carico utile, ridurre la ridondanza dei dati, e di rimanere più in linea con il pattern MVC. L'unico problema, ovviamente, era che la formattazione data in JavaScript non è così facile come PHP strftime o date funzioni. In quel momento abbiamo deciso di porto strftime a JavaScript.

Procediamo ora con un esempio e si tenta di creare un grafico come quello che ho descritto sopra. Si comincerà con la YUI Charts Esempio Quickstart , ma invece di lavorare con le stringhe mesi appena, useremo i dati basati su timestamp Unix ed elaborazione dei dati per 15 mesi.

Il DataSource dovrebbe assomigliare a questa:

 YAHOO.example.expenses =
 [
     / / Nota: Unix timestamp uscita dal secondo l'epoca,
     / / In modo da moltiplicare per 1000 per ottenere un timestamp JS
	 {Data: 1199174400000, affitto: 880,00, utilità: 894,68},
	 {Data: 1201852800000, affitto: 880,00, utilità: 901,35},
	 {Data: 1204358400000, affitto: 880,00, utilità: 889,32},
	 {Data: 1207033200000, affitto: 880,00, utilità: 884,71},
	 {Data: 1209625200000, affitto: 910,00, utilità: 879,811},
	 {Data: 1212303600000, affitto: 910,00, utilità: 897,95},
	 {Data: 1214895600000, affitto: 910,00, utilità: 894,68},
	 {Data: 1217574000000, affitto: 910,00, utilità: 901,35},
	 {Data: 1220252400000, affitto: 910,00, utilità: 889,32},
	 {Data: 1222844400000, affitto: 910,00, utilità: 884,71},
	 {Data: 1225522800000, affitto: 910,00, utilità: 889,81},
	 {Data: 1228118400000, affitto: 910,00, utilità: 897,95},
	 {Data: 1230796800000, affitto: 910,00, utilità: 894,68},
	 {Data: 1233475200000, affitto: 910,00, utilità: 921,35},
	 {Data: 1235894400000, affitto: 910,00, utilità: 889,32}
 ];

 var st = 0; it = YAHOO.example.expenses.length-1;

 YAHOO.example.getData = function () {
	 dati var = [];
	 for (var i = v; i <= it; i + +) {
		 data.push (YAHOO.example.expenses [i]);
	 }
	 restituire i dati;
 }

 var = new MyDataSource YAHOO.util.DataSource (YAHOO.example.getData);
 myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
 myDataSource.responseSchema =
 {
	 campi: ["Data", "affitto", "utilities"]
 };

Usiamo una funzione per restituire i dati in modo da poter tornare sottoinsiemi di esso sulla base di vari fattori scatenanti.

Faremo insieme la maggior parte del nostro grafico come l'esempio:

 / / Definisce più serie
 seriesDef var = 
 [
	 {DisplayName: "Rent", yField: "affitto"},
	 {DisplayName: "Utilities", yField: "utilità"}
 ];

 / / Definisce una funzione personalizzata per formattare i numeri come valuta lungo l'asse Y
 YAHOO.example.formatCurrencyAxisLabel = function (valore)
 {
	 ritorno YAHOO.util.Number.format (valore,
	 {
		 prefisso: "$",
		 ThousandsSeparator: ",",
		 DecimalPlaces: 2
	 });
 }

 currencyAxis YAHOO.widget.NumericAxis var = new ();
 currencyAxis.minimum = 800;
 currencyAxis.labelFunction = YAHOO.example.formatCurrencyAxisLabel;

 / / Crea una descrizione che indica quando si mouseover un punto di dati
 YAHOO.example.getDataTipText = funzione (elemento, indice, serie)
 {
	 ToolTipText var = series.displayName + "per" + item.date;
	 ToolTipText + = "\ n" + YAHOO.example.formatCurrencyAxisLabel ([series.yField] voce);
	 ritorno ToolTipText;
 }

 / / Creare il grafico
 mychart var = new YAHOO.widget.LineChart ("grafico", MyDataSource, {
		 serie: seriesDef,
		 xField: "date",
		 asseY: currencyAxis,
		 dataTipFunction: YAHOO.example.getDataTipText
	 }
 );

Questo grafico non è esattamente quello che volevamo però. Esso mostra data e ora prima in punta dell'utensile e sull'asse delle X. Per rimediare a questo, abbiamo bisogno di personalizzare entrambe queste utilizzando il formattatore data. Inizia con il getDataTipText funzione. Nota: le righe modificate in grassetto:

 YAHOO.example.getDataTipText = funzione (elemento, indice, serie)
 {
	 var d = new Date (item.date); 
	  sData var = YAHOO.util.Date.format (d, {formato: "% B% Y"});
	 ToolTipText var = series.displayName + "per" + sData;
	 ToolTipText + = "\ n" + YAHOO.example.formatCurrencyAxisLabel ([series.yField] voce);
	 ritorno ToolTipText;
 }

Abbiamo anche bisogno di definire un formattatore flessibile etichetta per l'asse X:

 YAHOO.example.xFormat = "% b% d";
 YAHOO.example.formatDate = function (valore)
 {
	 var d = new Date (valore);
	 ritorno YAHOO.util.Date.format (d, {YAHOO.example.xFormat});
 }

 timeAxis YAHOO.widget.TimeAxis var = new ();
 timeAxis.majorTimeUnit = "mese";
 timeAxis.labelFunction = YAHOO.example.formatDate;

E in questo passaggio al costruttore grafico. Nota: le modifiche al costruttore in precedenza indicati in grassetto.

 mychart var = new YAHOO.widget.LineChart ("grafico", MyDataSource, {
		 serie: seriesDef,
		 xField: "date",
		 asseY: currencyAxis,
		 asseX: timeAxis,
		 dataTipFunction: YAHOO.example.getDataTipText
	 }
 );

Infine, scriviamo una piccola funzione per disegnare la didascalia e modificare il formato etichetta asse delle ascisse.

 refreshChart funzione () {
	 if (questo this.nodeName & & & & this.nodeName.toUpperCase () == 'pulsante') {
		 gamma var = this.id.split ("_");
		 st = parseInt (range [1], 10);
		 en = parseInt (range [2], 10);
	 }
	 var caption ='';
	 var d1 = new Date (YAHOO.example.expenses [v] data.);
	 var = new Date d2 (YAHOO.example.expenses [it].);

	 if (d1.getFullYear ()! = d2.getFullYear ()) {
		 caption = YAHOO.util.Date.format (d1, {formato: "% b% Y -"})
					 + YAHOO.util.Date.format (D2, {formato: "% b% Y"});
		 YAHOO.example.xFormat = "% b 'y%";
	 } Else if (d1.getMonth ()! = D2.getMonth ()) {
		 caption = YAHOO.util.Date.format (d1, {formato: "% b -"})
					 + YAHOO.util.Date.format (D2, {formato: "% b% Y"});
		 YAHOO.example.xFormat = "% b";
	 Else {}
		 caption = YAHOO.util.Date.format (d1, {formato: "% d% b -"})
					 + YAHOO.util.Date.format (D2, {formato: "% d% b,% Y"});
	     YAHOO.example.xFormat = "% m-% d";
	 }

	 YAHOO.util.Dom.get ("caption") innerHTML caption =.

	 / / Ridisegna il grafico con la nuova gamma di dati
	 mychart.refreshData ();
 }

 refreshChart ();

 YAHOO.util.Event.on (document.getElementsByTagName ('bottone'), 'click', refreshChart);

Questa funzione viene chiamata ogni volta che si cambia l'intervallo dei dati visualizzati. Per fare questo, lo attribuiscono alla onclick caso di selezione la nostra gamma di pulsanti. Abbiamo anche chiamarlo sin dall'inizio in modo che la didascalia è disegnato in modo corretto. Il codice per i pulsanti di selezione della gamma dovrebbe assomigliare a questa:

 <button id="b_0_2"> Q1 '08 </ button>
 id="b_3_5"> <button Q2 '08 </ button>
 id="b_6_8"> <button Q3 '08 </ button>
 id="b_9_11"> <button Q4 '08 </ button>

 <button id="b_12_14"> Q1 '09 </ button>
 id="b_0_14"> <button Tutta la gamma </ button>

Mettere tutto insieme, otteniamo una data in formato grafico personalizzato . Notate come le etichette l'asse X mostra abbreviato mesi e anni, mentre la punta strumento mostra tutto il mese e l'anno.

Nella parte finale di questa serie, vedremo localizzazione data per applicazioni web internazionalizzati.

Trova conversazioni: bloglines | technorati

Condividi e ampliare: Bookmark con del.icio.us | digg it! | reddit!