Yahoo! interfaz de usuario de blog (YUIBlog)

Fecha con formato YUI - Parte III

En la Parte I , hemos visto cómo dar formato a una fecha fácil de usar formateador YUI fecha y en la segunda parte nos fijamos en el formato de fechas para el control DataTable. Ahora vamos a echar un vistazo a cómo dar formato a las fechas de la YUI gráficos de control.

Curiosamente, fue el control de gráficos que primero llevó al desarrollo del formateador de la fecha. Estábamos construyendo un gráfico de series de tiempo y es necesario dar formato a fechas diferentes en distintos lugares. Fechas que aparecen a lo largo de nuestro eje X debía ser apropiada para la zona representada por la tabla. Por ejemplo, para el mes de expansión de datos, hemos querido que las etiquetas sean a nivel de mes-día, y para los datos de los datos de años, queríamos que las etiquetas para mostrar el mes y año. También queríamos leyenda del gráfico para mostrar el rango de fechas todo en un formato amigable humanos como "01-03 2008". Finalmente, el gráfico necesita una información sobre herramientas para mostrar la fecha exacta para el punto de cursor del mouse.

O bien podría hacer que todos estos datos en la fecha pre-formateados cadenas con PHP en la parte final, o podemos enviar los datos de fecha de primas a la parte delantera y tener JavaScript que hacer adecuadamente. Fuimos con la segunda opción para reducir el tamaño de la carga útil, reducir la redundancia de datos, y para estar más en línea con el patrón MVC. El único problema, por supuesto, era que el formato de fechas en JavaScript no es tan fácil como PHP strftime o date las funciones. Fue entonces cuando decidió portar strftime de JavaScript.

Ahora vamos a proceder con un ejemplo y un intento de crear una tabla como la que he descrito arriba. Vamos a empezar con el YUI Gráficos Ejemplo de inicio rápido , pero en lugar de trabajar con cadenas tan sólo el mes, vamos a utilizar los datos basados ​​en marcas de tiempo Unix y trabajar con datos de 15 meses.

El origen de datos debe tener este aspecto:

 YAHOO.example.expenses =
 [
     / / Nota: Unix segundo las marcas de tiempo de salida desde la Época,
     / / Así que multiplique por 1000 para obtener una marca de tiempo JS
	 {Fecha: 1199174400000, alquiler: 880,00, los servicios públicos: 894,68},
	 {Fecha: 1201852800000, alquiler: 880,00, los servicios públicos: 901,35},
	 {Fecha: 1204358400000, alquiler: 880,00, los servicios públicos: 889,32},
	 {Fecha: 1207033200000, alquiler: 880,00, los servicios públicos: 884,71},
	 {Fecha: 1209625200000, alquiler: 910,00, los servicios públicos: 879.811}
	 {Fecha: 1212303600000, alquiler: 910,00, los servicios públicos: 897,95},
	 {Fecha: 1214895600000, alquiler: 910,00, los servicios públicos: 894,68},
	 {Fecha: 1217574000000, alquiler: 910,00, los servicios públicos: 901,35},
	 {Fecha: 1220252400000, alquiler: 910,00, los servicios públicos: 889,32},
	 {Fecha: 1222844400000, alquiler: 910,00, los servicios públicos: 884,71},
	 {Fecha: 1225522800000, alquiler: 910,00, los servicios públicos: 889,81},
	 {Fecha: 1228118400000, alquiler: 910,00, los servicios públicos: 897,95},
	 {Fecha: 1230796800000, alquiler: 910,00, los servicios públicos: 894,68},
	 {Fecha: 1233475200000, alquiler: 910,00, los servicios públicos: 921,35},
	 {Fecha: 1235894400000, alquiler: 910,00, los servicios públicos: 889,32}
 ];

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

 YAHOO.example.getData = function () {
	 var datos = [];
	 for (var i = st, i <= es; i + +) {
		 data.push (YAHOO.example.expenses [i]);
	 }
	 devolver los datos;
 }

 var = new MyDataSource YAHOO.util.DataSource (YAHOO.example.getData);
 myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
 myDataSource.responseSchema =
 {
	 campos: ["fecha", "renta", "servicios públicos"]
 };

Nosotros usamos una función para devolver los datos para que podamos devolver subconjuntos de la misma sobre la base de diversos factores desencadenantes.

Vamos a configurar la mayor parte de nuestra carta como en el ejemplo:

 / / Definición de múltiples series
 var = seriesDef 
 [
	 {DisplayName: "Rent", yField: "renta"},
	 {DisplayName: "Utilidades", yField: "utilities"}
 ];

 / / Definir una función personalizada a los números de formato de moneda a lo largo del eje
 YAHOO.example.formatCurrencyAxisLabel = function (valor)
 {
	 volver YAHOO.util.Number.format (valor,
	 {
		 prefijo: "$",
		 thousandsSeparator: "",
		 LugaresDecimales: 2
	 });
 }

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

 / / Crear una información sobre herramientas que aparece cuando mouseover un punto de datos
 YAHOO.example.getDataTipText = function (elemento, índice, serie)
 {
	 var ToolTipText = series.displayName + "para" + item.date;
	 ToolTipText + = "\ n" + YAHOO.example.formatCurrencyAxisLabel (punto [series.yField]);
	 volver ToolTipText;
 }

 / / Crear la tabla
 var = new MyChart YAHOO.widget.LineChart ("tabla", MyDataSource, {
		 Serie: seriesDef,
		 XField: "la fecha",
		 ejeY respectivamente: currencyAxis,
		 dataTipFunction: YAHOO.example.getDataTipText
	 }
 );

Esta tabla no es exactamente lo que quería sin embargo. Muestra las marcas de tiempo prima en la punta de la herramienta y en el eje X. Para remediar esto, tenemos que personalizar ambos usando el formateador de la fecha. Comience con el getDataTipText función. Tenga en cuenta las líneas cambiadas en negrita:

 YAHOO.example.getDataTipText = function (elemento, índice, serie)
 {
	 var d = new Date (item.date); 
	  var = sdate YAHOO.util.Date.format (d, {formato: "% B% Y"});
	 var ToolTipText = series.displayName + "para" + sdate;
	 ToolTipText + = "\ n" + YAHOO.example.formatCurrencyAxisLabel (punto [series.yField]);
	 volver ToolTipText;
 }

También tenemos que definir un formateador etiqueta flexible para el eje X:

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

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

Y pasar esto en el constructor de tabla. Tenga en cuenta los cambios en el constructor antes marcados en negrita.

 var = new MyChart YAHOO.widget.LineChart ("tabla", MyDataSource, {
		 Serie: seriesDef,
		 XField: "la fecha",
		 ejeY respectivamente: currencyAxis,
		 ejeX: timeAxis,
		 dataTipFunction: YAHOO.example.getDataTipText
	 }
 );

Por último, escribir una pequeña función para dibujar la leyenda y cambiar el formato de la etiqueta del eje x.

 refreshChart function () {
	 if (este & & & & this.nodeName this.nodeName.toUpperCase () == "botón") {
		 var rango = this.id.split ("_");
		 st = parseInt (rango [1], 10);
		 en = parseInt (rango [2], 10);
	 }
	 var caption ='';
	 var d1 = new Date (YAHOO.example.expenses [st] la fecha.)
	 var d2 = new Date (YAHOO.example.expenses [en] la fecha.)

	 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 = título.;

	 / / Dibujar el gráfico con la nueva gama de datos
	 mychart.refreshData ();
 }

 refreshChart ();

 YAHOO.util.Event.on (document.getElementsByTagName ('botón'), 'click', refreshChart);

Esta función se llama cuando se cambia el rango de datos que se muestran. Para ello, se adhieren a la onclick caso de los botones de selección de rango. También tenemos que llamarlo desde el principio para que el título se dibuja correctamente. El marcado de los botones de selección de rango debería tener este aspecto:

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

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

Poniendo todo junto, tenemos una fecha en formato de gráfico . Observe cómo las etiquetas en el eje X muestra abreviado meses y años, mientras que la punta de la herramienta muestra el mes y año.

En la parte final de esta serie, vamos a ver la localización fecha para aplicaciones web internacionalizado.

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar con del.icio.us | Digg it! | reddit!