Yahoo! Blog de l'interface utilisateur (YUIBlog)

Date mise en forme avec YUI - Partie III

Dans la partie I , nous avons vu comment facilement le format d'une date par date du formateur YUI et dans la partie II , nous avons examiné la mise en forme des dates pour le contrôle DataTable. Nous allons maintenant jeter un oeil à la façon de formater des dates pour la YUI tableaux de contrôle.

Fait intéressant, ce sont les cartes de contrôle qui conduit à l'élaboration du formateur de date. Nous avons été la construction d'un tableau chronologique et nécessaires pour formater des dates différentes à divers endroits. Dates affichées le long de notre axe X doit être adapté à la gamme représenté par le graphique. Par exemple, pendant des mois des données couvrant, nous voulions que les étiquettes d'être à un niveau mois-jour, et pour les années de données de données, nous avons voulu les étiquettes pour voir le mois et l'année. Nous voulions aussi la légende du graphique pour afficher toute la plage de dates dans un format convivial de l'homme comme "Janvier - Mars 2008". Enfin, le tableau avait besoin d'une info-bulle pour afficher la date exacte pour le point de passer la souris.

On pourrait soit rendre toutes ces données en date de chaînes pré-formaté à l'aide de PHP sur l'arrière, ou nous pourrions envoyer les données de date premières à l'extrémité avant et JavaScript rendre appropriée. Nous sommes allés avec la deuxième option pour réduire la taille de charge utile, de réduire la redondance des données, et de rester plus en ligne avec le modèle MVC. Le seul problème, bien sûr, c'est que le formatage des dates en JavaScript n'est pas aussi facile que de PHP strftime ou date fonctions. C'est alors que nous avons décidé de port strftime de JavaScript.

Nous allons maintenant procéder à l'exemple et essayez de créer un tableau comme celui que j'ai décrit ci-dessus. Nous allons commencer avec la YUI Cartes Exemple Quickstart , mais au lieu de travailler avec le mois juste des chaînes, nous allons utiliser les données basées sur les timestamps Unix et travailler avec des données pendant 15 mois.

Le DataSource devrait ressembler à ceci:

 YAHOO.example.expenses =
 [
     / / Note: secondes Unix timestamps de sortie depuis l'époque,
     / / Afin de multiplier par 1000 pour obtenir un timestamp JS
	 (Date: 1199174400000, loyer: 880.00, les services publics: 894,68),
	 (Date: 1201852800000, loyer: 880.00, les services publics: 901,35),
	 (Date: 1204358400000, loyer: 880.00, les services publics: 889,32),
	 (Date: 1207033200000, loyer: 880.00, les services publics: 884,71),
	 (Date: 1209625200000, loyer: 910,00, les services publics: 879,811),
	 (Date: 1212303600000, loyer: 910,00, les services publics: 897,95),
	 (Date: 1214895600000, loyer: 910,00, les services publics: 894,68),
	 (Date: 1217574000000, loyer: 910,00, les services publics: 901,35),
	 (Date: 1220252400000, loyer: 910,00, les services publics: 889,32),
	 (Date: 1222844400000, loyer: 910,00, les services publics: 884,71),
	 (Date: 1225522800000, loyer: 910,00, les services publics: 889,81),
	 (Date: 1228118400000, loyer: 910,00, les services publics: 897,95),
	 (Date: 1230796800000, loyer: 910,00, les services publics: 894,68),
	 (Date: 1233475200000, loyer: 910,00, les services publics: 921,35),
	 (Date: 1235894400000, loyer: 910,00, les services publics: 889,32)
 ];

 r. var = 0; fr = YAHOO.example.expenses.length-1;

 YAHOO.example.getData = function () (
	 données var = [];
	 for (var i = r.; <i = fr; i + +) (
		 YAHOO.example.expenses data.push ([i]);
	 )
	 les données de retour;
 )

 MyDataSource var = new YAHOO.util.DataSource (YAHOO.example.getData);
 myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
 myDataSource.responseSchema =
 (
	 domaines: ["date", "Location", "services publics"]
 );

Nous utilisons une fonction pour renvoyer les données afin que nous puissions revenir sous-ensembles de celui-ci repose sur divers déclencheurs.

Nous allons mettre en place la plupart de nos tableau comme par exemple:

 / / Définit plusieurs séries
 seriesDef var = 
 [
	 (DisplayName: "Location", yField: «loyer»),
	 (DisplayName: "Utilitaires", yField: «services publics»)
 ];

 / / Définit une fonction personnalisée pour formater des nombres en tant que monnaie long de l'axe des Y
 YAHOO.example.formatCurrencyAxisLabel = function (valeur)
 (
	 retour YAHOO.util.Number.format (valeur,
	 (
		 préfixe: «$»,
		 ThousandsSeparator: ",",
		 Décimales: 2
	 ));
 )

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

 / / Création d'une info-bulle qui apparaît lorsque vous mouseover un point de données
 YAHOO.example.getDataTipText = function (item, index, série)
 (
	 ToolTipText var = series.displayName + "pour" item.date +;
	 + ToolTipText = "\ n" + YAHOO.example.formatCurrencyAxisLabel (point series.yField []);
	 ToolTipText retour;
 )

 / / Création de la liste
 montableau var = new YAHOO.widget.LineChart ("tableau", MyDataSource, (
		 série: seriesDef,
		 xField: "date",
		 Yaxis: currencyAxis,
		 dataTipFunction: YAHOO.example.getDataTipText
	 )
 );

Ce tableau n'est pas tout à fait ce que nous voulions bien. Il affiche les horodatages premières dans la pointe de l'outil et sur l'axe X. Pour y remédier, nous avons besoin de personnaliser ces deux utilisant le formateur de date. Commencez par le getDataTipText fonction. Note lignes de la modification en caractères gras:

 YAHOO.example.getDataTipText = function (item, index, série)
 (
	 var d = new Date (item.date); 
	  SDATE var = YAHOO.util.Date.format (d, (format: "% B% Y"));
	 ToolTipText var = series.displayName + "pour" SDATE +;
	 + ToolTipText = "\ n" + YAHOO.example.formatCurrencyAxisLabel (point series.yField []);
	 ToolTipText retour;
 )

Nous avons également besoin de définir un formateur de l'étiquette souple pour l'axe X:

 YAHOO.example.xFormat = "% b% d";
 YAHOO.example.formatDate = function (valeur)
 (
	 var d = new Date (valeur);
	 retour YAHOO.util.Date.format (d, () YAHOO.example.xFormat);
 )

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

Et ce passage au constructeur graphique. Notez les changements au constructeur tôt marqués en gras.

 montableau var = new YAHOO.widget.LineChart ("tableau", MyDataSource, (
		 série: seriesDef,
		 xField: "date",
		 Yaxis: currencyAxis,
		 XAxis: timeAxis,
		 dataTipFunction: YAHOO.example.getDataTipText
	 )
 );

Enfin, nous écrire une petite fonction d'établir la légende et modifier le format d'étiquette X-axe.

 refreshChart fonction () (
	 if (this & & & & this.nodeName this.nodeName.toUpperCase () == 'bouton') (
		 var range = this.id.split ("_");
		 st = parseInt (plage [1], 10);
		 fr = parseInt (plage [2], 10);
	 )
	 ''Titre var =;
	 var d1 = new Date (YAHOO.example.expenses [ST]. date);
	 var d2 = new Date (YAHOO.example.expenses [fr]. date);

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

	 YAHOO.util.Dom.get ("légende"). InnerHTML = légende;

	 / / Redessiner la carte avec la nouvelle gamme de données
	 mychart.refreshData ();
 )

 refreshChart ();

 YAHOO.util.Event.on (document.getElementsByTagName («bouton»), «clic», refreshChart);

Cette fonction est appelée chaque fois que nous modifier la gamme des données affichées. Pour ce faire, nous attacher à la onclick cas de nos boutons de sélection de la plage. Nous avons aussi de l'appeler dès le début afin que la légende est dessiné correctement. Le balisage de la gamme de boutons de sélection devrait ressembler à ceci:

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

 <button id="b_12_14"> Q1 '09 </ button>
 <button <id="b_0_14"> ensemble / button>

Mettre le tout ensemble, on obtient une date au format de graphique personnalisé . Notez que les étiquettes sur le spectacle X-Axis abrégée mois et des années alors que la pointe de l'outil affiche le mois et l'année complète.

Dans la dernière partie de cette série, nous allons voir localisation date pour les applications Web internationalisé.

Trouver des conversations: Bloglines | technorati

Partager et prolonger: Ajouter aux Favoris del.icio.us | Digg it! | reddit!