ヤフーユーザーインターフェイスブログ（YUIBlog）

YUIを使って日付の書式設定-パートIII

にパートIは 、我々は簡単にYUIの日付フォーマッタを使用して日付をフォーマットする方法を説明しましたとでパートII我々は、DataTableコントロールの書式の日付を見ました。 我々は現在の日付書式を設定する方法を見てみます。 YUIチャートコントロール。

興味深いことに、それは最初に日付フォーマッタの開発につながったチャートコントロールであった。 我々は、時系列グラフを構築し、様々な場所で異なった形式の日付に必要であった。 日付はグラフによって表される範囲に適切であるために必要な当社のX軸に沿って表示されます。 たとえば、データスパニングヶ月間、我々は月 - 日のレベルにあるラベルを望んで、データのデータ年のために、私達は月と年を表示するラベルを望んでいた。 また、 " - 3月2008年1月"のような人間フレンドリーな形式で全体の日付範囲を表示するグラフのキャプションを望んでいた。 最後に、グラフは、マウスのホバーポイントの正確な日付を表示するツールチップを必要としていました。

我々は、バックエンドにPHPを使用してプリフォーマットされた文字列に、この日付のすべてのデータをレンダリングすることができるか、我々は、フロントエンドに生の日付データを送信し、JavaScriptが適切にレンダリングする可能性があります。 我々は、ペイロードサイズを小さく、データの冗長性を削減し、MVCパターンに沿ってもっと滞在する2番目のオプションと一緒に行きました。 唯一の問題はもちろん、JavaScriptでの日付の書式がPHPのと同じくらい簡単ではありませんということでしたstrftimeまたはdate関数。 我々は移植することを決めたときですstrftime JavaScriptに。

今の例と私は、上記説明したようなグラフを作成しようとすると続行してみましょう。 我々は、YUIチャートから始めましょうクイックスタートの例ではなく、ただの月文字列を扱う、我々は15ヶ月間のデータをUnixタイムスタンプと作業に基づいてデータを使用します。

データソースは次のようになります。

 YAHOO.example.expenses =
 [
     / /注：エポックからのUnixタイムスタンプの出力秒
     / /の​​で、JSのタイムスタンプを取得するために1000を掛ける
	 {日付：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}、
	 {日付：1217574000000、家賃：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}
 ];

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

 YAHOO.example.getData =関数（）{
	 VARデータ= [];
	のために（ます。var i = STは、i <= EN、私は+ +）{
		 data.push（YAHOO.example.expenses [I]）;
	 }
	データを返します。
 }

 varは=新しい（YAHOO.example.getData）YAHOO.util.DataSource myDataSourceが。
 myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY。
 myDataSource.responseSchema =
 {
	フィールド：["日付"、 "家賃"、 "ユーティリティ"]
 };

私たちはさまざまなトリガに基づいてのサブセットを返すことができるようにデータを返すために関数を使用します。

我々は、例のように私たちのグラフのほとんどを設定します：

 / /複数の系列を定義します。
 VAR seriesDef = 
 [
	 {並び： "レント"、yField： "家賃"}、
	 {並び： "ユーティリティ"、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を返します。
 }

 / /グラフを作成します。
 VAR mychart =新しいYAHOO.widget.LineChart（ "チャート"、myDataSourceが、{
		シリーズ：seriesDef、
		 xField： "日付"、
		 YAXIS：currencyAxis、
		にdataTipFunction：YAHOO.example.getDataTipText
	 }
 。）

このチャートは、我々はしかしかなり欲しいものではありません。 それがツールチップに、X軸上に生のタイムスタンプを表示します。 この問題を解決するために、我々は日付フォーマッタを使用して、これらの両方をカスタマイズする必要があります。 で始まるgetDataTipText機能。 太字で表示され変更された行に注意してください。

 YAHOO.example.getDataTipText =関数（項目、インデックス、シリーズ）
 {
	 VAR D =新しい日付（item.date）; 
	  VAR 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 D =新しい日付（値）;
	 YAHOO.util.Date.formatを（D、{YAHOO.example.xFormat}）を返します。
 }

 VAR timeAxis =新しいYAHOO.widget.TimeAxis（）;
 timeAxis.majorTimeUnit = "月";
 timeAxis.labelFunction = YAHOO.example.formatDate。

とチャートのコンストラクタに、これを渡します。 太字で表示され、以前のコンストラクタへの変更に注意してください。

 VAR mychart =新しいYAHOO.widget.LineChart（ "チャート"、myDataSourceが、{
		シリーズ：seriesDef、
		 xField： "日付"、
		 YAXIS：currencyAxis、
		 XAXIS：timeAxis、
		にdataTipFunction：YAHOO.example.getDataTipText
	 }
 。）

最後に、キャプションを描画し、x軸ラベルの書式を変更するには、小さな関数を作成します。

関数refreshChart（）{
	場合（この&& this.nodeName && this.nodeName.toUpperCase（）== 'ボタン'）{
		 VARの範囲= this.id.split（ "_"）;
		 ST = parseIntは（範囲[1]、10）;
		 EN = parseIntは（範囲[2]、10）;
	 }
	 VARキャプション='';
	 VAR D1 =新しい日付（YAHOO.example.expenses [ST]日付）;
	 VAR D2 =新しい日付（YAHOO.example.expenses [en]本気日付）;

	 IF（d1.getFullYear（）！= d2.getFullYear（））{
		キャプション= YAHOO.util.Date.format（D1、{形式： "％bと％のY  - "}）
					 + YAHOO.util.Date.format（D2、{フォーマット： "％B％Y"}）;
		 YAHOO.example.xFormat = "％B '％Y";
	 }他の場合（d1.getMonth（）！= d2.getMonth（））{
		キャプション= YAHOO.util.Date.format（D1、{形式： "％bと - "}）
					 + YAHOO.util.Date.format（D2、{フォーマット： "％B％Y"}）;
		 YAHOO.example.xFormatは= "％bの";
	する} else {
		キャプション= 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私たちの範囲選択ボタンのイベント。 また、キャプションが正しく描画されるように、開始時に右のそれを呼び出す必要があります。 範囲選択ボタンのマークアップは次のようになります。

 <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軸上のラベルが短縮された月および年を表示する方法に注目してください。

このシリーズの最後の部分では、我々は国際化Webアプリケーションの日付のローカライズを見てみましょう。

会話を検索： Bloglinesの | テクノラティ

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！