Yahoo!用戶界面博客（YUIBlog）

日期格式使用YUI -第三部分

3月18日下午02:59 2009年由菲利普特利斯|在發展中| 2評論

我在第一部分中，我們看到了如何輕鬆地使用YUI的日期格式化格式日期，並在第二部分中，我們在格式化日期為DataTable控制。 我們現在就看看如何格式化日期為YUI的圖表控制。

有趣的是，圖表控制，首先導致的日期格式化的發展。 我們正在建立一個時間序列圖表，需要在不同地點，不同格式的日期。 沿我們需要適當的圖表所代表的範圍的X軸顯示的日期。 例如，對於數據跨越個月，我們想要的標籤，在為期一個月的天級，數據年的數據，我們想要的標籤，以顯示月份和年份。 我們也希望圖表的標題顯示在一個人喜歡友好的格式的整個日期範圍“1月 - 2008年3月”。 最後，圖表需要一個工具提示顯示為鼠標懸停點的確切日期。

我們可以呈現為預格式化的字符串使用PHP在後端所有此日期數據，或者我們可以原始的日期數據發送到前端的JavaScript適當地加以渲染。 我們去的第二個選項，以減少有效載荷的大小，減少數據冗餘，留在MVC模式。 當然，唯一的問題是，在JavaScript中的日期格式是不strftime strftime date函數如PHP的。 當我們決定端口strftime到JavaScript。

現在，讓我們進行一個例子，並試圖建立一個像我上面所描述的的圖表。 我們將開始與YUI圖表快速入門範例 ，但是，而不是僅僅一個月的字符串工作，我們將使用基於Unix時間戳和為15個月的數據的工作的數據。

數據源，看起來應該像這樣：

 YAHOO.example.expenses =
 [
     / /注意：Unix時間戳輸出秒的時代以來，
     / /所以乘以1000得到一個 JS時間戳
	 {日期：1199174400000，租金：880.00，水電費：894.68}，
	 {日期：1201852800000，租金：880.00，水電費：901.35}，
	 {日期：1204358400000，租金：880.00，水電費：889.32}，
	 {日期：1207033200000，租金：880.00，水電費：884.71}，
	 {日期：1209625200000，租金：910.00，公用事業：879.811}，
	 {日期：1212303600000，租金：910.00，水電費：897.95}，
	 {日期：1214895600000，租金：910.00，水電費：894.68}，
	 {日期：12175.74億，租金：910.00，水電費：901.35}，
	 {日期：1220252400000，租金：910.00，水電費：889.32}，
	 {日期：1222844400000，租金：910.00，水電費：884.71}，
	 {日期：1225522800000，租金：910.00，水電費：889.81}，
	 {日期：1228118400000，租金：910.00，水電費：897.95}，
	 {日期：1230796800000，租金：910.00，水電費：894.68}，
	 {日期：1233475200000，租金：910.00，水電費：921.35}，
	 {日期：1235894400000，租金：910.00，水電費：889.32}
 ;

 ST = 0; EN = YAHOO.example.expenses.length - 1;

 YAHOO.example.getData =函數（）{
	 VAR數據 = [];
	 （VAR我= ST; I <= EN; I + +）{
		 data.push（YAHOO.example.expenses [I]）;
	 }
	返回的數據;
 }

 VAR myDataSource =新YAHOO.util.DataSource（YAHOO.example.getData）;
 myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
 myDataSource.responseSchema =
 {
	領域：[“日”，“租”，“公用事業”]
 };

我們使用一個函數來返回數據，所以我們可以返回基於各種觸發它的子集。

我們將建立我們的圖表最喜歡的例子：

 / /定義多個系列
 VAR seriesDef = 
 [
	 {DisplayName的“租金”，yField：“租金”}，
	 {的DisplayName：“工具”，yField：“工具”}
 ;

 / /定義一個自定義函數沿Y軸為貨幣格式的數字
 YAHOO.example.formatCurrencyAxisLabel =功能（價值）
 {
	返回YAHOO.util.Number.format（價值，
	 {
		 “$”前綴：
		 thousandsSeparator：“，”
		 decimalPlaces：2
	 }）;
 }

 VAR currencyAxis =新YAHOO.widget.NumericAxis（）;
 currencyAxis.minimum = 800;
 currencyAxis.labelFunction = YAHOO.example.formatCurrencyAxisLabel;

 / /創建了一個工具提示，當你鼠標指向一個數據點
 YAHOO.example.getDataTipText =（項目，索引，系列）
 {
	 VAR的ToolTipText = series.displayName +“”+ item.date;
	 TOOLTIPTEXT + =“\ N”YAHOO.example.formatCurrencyAxisLabel（項目 [series.yField]）;
	返回TOOLTIPTEXT;
 }

 / /創建圖表
 mychart =新YAHOO.widget.LineChart（“圖表”，myDataSource，{
		系列：seriesDef
		 xField：“日期”，
		 Y軸：currencyAxis
		 dataTipFunction：YAHOO.example.getDataTipText
	 }
 ）;

這個圖表是什麼，我們雖然希望不大。 它顯示了在刀尖上X軸的原始時間戳。 為了解決這個問題，我們需要自定義使用的日期格式化這些。 開始的getDataTipText功能。 請注意改變以粗體標線：

 YAHOO.example.getDataTipText =（項目，索引，系列）
 {
	 VAR ð =新的日期（item.date）; 
	  sDate = YAHOO.util.Date.format（D，{格式為：“％B％Y”}）;
	 VAR的ToolTipText = series.displayName +“”+ sDate;
	 TOOLTIPTEXT + =“\ N”YAHOO.example.formatCurrencyAxisLabel（項目 [series.yField]）;
	返回TOOLTIPTEXT;
 }

我們還需要定義一個靈活的X軸標籤格式化：

 YAHOO.example.xFormat =“％B％D”;
 YAHOO.example.formatDate =功能（價值）
 {
	 VAR ð =新的日期（值）;
	返回YAHOO.util.Date.format（D，{YAHOO.example.xFormat}）;
 }

 VAR timeAxis =新YAHOO.widget.TimeAxis（）;
 timeAxis.majorTimeUnit =“月”;
 timeAxis.labelFunction = YAHOO.example.formatDate;

並通過圖表構造。 注意早期構造以粗體標記的變化。

 mychart =新YAHOO.widget.LineChart（“圖表”，myDataSource，{
		系列：seriesDef
		 xField：“日期”，
		 Y軸：currencyAxis
		 X軸：timeAxis
		 dataTipFunction：YAHOO.example.getDataTipText
	 }
 ）;

最後，我們寫一個小函數來繪製標題和改變 X軸標籤格式。

功能refreshChart（）{
	 （＆this.nodeName＆＆this.nodeName.toUpperCase（）=='按鈕'）{
		範圍 = this.id.split ("_");
		 ST = parseInt（範圍 [1]，10）;
		 EN = parseInt（範圍 [2]，10）;
	 }
	 VAR標題 = '';
	 VAR D1 =新的日期（YAHOO.example.expenses [ST]的日期。）;
	 VAR D2 =新的日期（YAHOO.example.expenses [EN]日期）。

	 （d1.getFullYear（）！= d2.getFullYear（））{
		標題 = YAHOO.util.Date.format（D1，格式：“％B％Y - ”}）
					 + YAHOO.util.Date.format（D2，格式：“％B％Y”}）;
		 YAHOO.example.xFormat =“％B％Y”;
	代碼} else if（d1.getMonth（）= d2.getMonth（））{
		標題 = YAHOO.util.Date.format（D1，{格式：“％B - ”}）
					 + YAHOO.util.Date.format（D2，格式：“％B％Y”}）;
		 YAHOO.example.xFormat =“％B”;
	 }否則 {
		標題 = YAHOO.util.Date.format（D1，{格式：“％d的％B - ”}）
					 + YAHOO.util.Date.format（D2，{格式：“％d的％B％Y”}）;
	     YAHOO.example.xFormat =“％M -％D”;
	 }

	 YAHOO.util.Dom.get（“標題”）的innerHTML =標題;

	 / /重繪新的數據圖表
	 mychart.refreshData（）;
 }

 refreshChart（）;

 YAHOO.util.Event.on（document.getElementsByTagName（“按鈕”），“點擊”，refreshChart）;

每當我們改變顯示的數據範圍內調用此函數。 要做到這一點，我們重視它onclick onclick事件對我們的範圍內選擇按鈕。 我們還必須在開始調用是正確的，這樣的標題是正確繪製。 範圍選擇按鈕的標記看起來應該像這樣：

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

 <button id="b_12_14"> Q1 '09 </按鈕>
 <button id="b_0_14">整個範圍 </按鈕>

全部放在一起，我們得到了一個自定義日期格式的圖表 。 請注意X軸標籤顯示縮寫的幾個月甚至幾年，而刀尖顯示完整的月份和年份。

在本系列的最後一部分，我們將看看日期本地化，國際化的網絡應用程序。

談話： bloglines | technorati

分享和擴展： 書籤del.icio.us | Digg它！ | 書籤交易！