야후! 사용자 인터페이스 블로그 (YUIBlog)

날짜 서식 YUI가있는 방 - 파트 III

에 부 , 우리가보고하는 방법을 쉽게 형식 및 날짜를 사용하여 유이네 날짜 포맷 제 2 부 우리가 제어 할 DataTable을위한 날짜를 보였에서 서식. 우리가보고있는 것이다 살펴보고 지금 어떻게 날짜 형식에 YUI 차트 제어할 수 있습니다.

흥미롭게도, 처음 날짜 포맷의 발전에 주도 차트 컨트롤을했다. 우리는 시간 시리즈 차트를 구축했고 형식으로 날짜에 필요한 여러 지역에서 다르게. X가 - 범위 차트로 표시에 적합한하는 데 필요한 축 데이트가 함께 표시됩니다. 예를 들어, 데이터 걸친 개월 동안, 우리는 한 달 - 일 수준에있다면, 원하는 레이블 및 데이터 데이터 년간, 우리는 달과 연도 표시 라벨을 싶었어요. 우리는 또한 1월 "와 같은 인간 친화적인 형식으로 전체 기간을 표시하려면 차트의 캡션을 원한 - 3 월 2008". 마지막으로 차트 마우스 가져가 지점에 대한 정확한 날짜를 표시하는 툴팁이 필요했습니다.

우리도 모두 사전 형식의 문자열을 백 엔드에서 PHP를 사용하여, 해당 날짜에 데이터의 렌더링거나 우리는 프런트 엔드에 원시 날짜 데이터를 보낼 수 및 JavaScript를 적절하게 그것을 렌더링합니다. 우리는 두 번째 옵션, 데이터 중복을 줄이고, 그리고 페이로드 크기를 줄이기 위해 MVC 패턴과 일치 더 남아있었습니다. 유일한 문제는 물론, 자바 스크립트 였죠에 서식 데이트 PHP는 않을만큼 쉽게 strftime 또는 date 함수. 그 포트의 때 결정한 우리가 strftime 자바 스크립트합니다.

굳이 말하자면 지금은 예를 들어 진행하고 시도 제가 위에서 설명한 것처럼 차트를 생성할 수 있습니다. 우리는 차트 YUI거야 시작과 빠른 예 ,하지만 대신 문자열 개월 근무와 함께, 우리는 유닉스 타임 스탬프거야에 따라 사용할 데이터와 달 15 일 대한 데이터 작업.

데이터 소스는 다음과 같이한다 :

 YAHOO.example.expenses =
 [
     / / 참고 : 유닉스 타임 스탬프 출력 초 원기 이후로,
     / / 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),
	 (날짜 : 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에의 성 = 0; = YAHOO.example.expenses.length - 1 ko를;

 YAHOO.example.getData = 함수 () (
	 var에 데이터 = []를;
	 var에 나는 = 성; 나는 <= ko 페이지 (용; 난 + +) (
		 (data.push YAHOO.example.expenses은 [내가]);
	 )
	 반환 데이터;
 )

 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 ();
 = 800 currencyAxis.minimum;
 currencyAxis.labelFunction = YAHOO.example.formatCurrencyAxisLabel;

 때 데이터 포인트 mouseover 나타나기 / / 만들기 도구 팁을
 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 (라, (형식 : "% B의 % Y"는));
	 var에 TooltipText은 = series.displayName + "sDate +에 대한";
	 TooltipText + =이 "\ n"+ YAHOO.example.formatCurrencyAxisLabel (항목 [series.yField]);
	 반송 TooltipText;
 )

우리는 또한 X 축에 대한 융통성있는 레이블 포맷 터를 정의해야합니다 :

 YAHOO.example.xFormat = "% 아침 식사 % d 개";
 YAHOO.example.formatDate = 기능 (값)
 (
	 var에 d 개 = 새로운 날짜 (값);
	 반환 YAHOO.util.Date.format (라, 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 ("_");을
		 성 = parseInt (범위 [1], 10);
		 ko를 = parseInt (범위 [2], 10);
	 )
	 var에 캡션 = '';
	 var에 YAHOO.example.expenses 세인트]를 [D1에 = 새로운 날짜 (. 날짜);
	 var에 YAHOO.example.expenses 소리] ko 페이지 [d2 = 새로운 날짜 (. 날짜);

	 (d1.getFullYear ()면! = d2.getFullYear ()) (
		 캡션 = YAHOO.util.Date.format (D1에, (형식 : "% b % Y의 -"))
					 + YAHOO.util.Date.format (d2, (형식 : "% 아침의 % Y"는));
		 YAHOO.example.xFormat = "% 아침 식사 '% y는";
	 ) 다른면 (d1.getMonth ()! = d2.getMonth ()) (
		 캡션 = YAHOO.util.Date.format (D1에, (형식 : "% b -"))
					 + YAHOO.util.Date.format (d2, (형식 : "% 아침의 % Y"는));
		 YAHOO.example.xFormat = "% 아침 식사";
	 다른) (
		 캡션 = YAHOO.util.Date.format (D1에, (형식 : "% d 개 % b -"))
					 + YAHOO.util.Date.format (d2, (형식 : "% d 개의 % 아침 식사, % Y"는));
	     YAHOO.example.xFormat = "%의 고도 - % d 개";
	 )

	 YAHOO.util.Dom.get ( "캡션"). innerHTML = 캡션;

	 / / 데이터의 새로운 범위와 차트를 다시 그리기
	 mychart.refreshData ();
 )

 refreshChart ();

 YAHOO.util.Event.on (document.getElementsByTagName ( ''), '다음', refreshChart) 버튼;

이 기능은 언제든지 우리는 데이터 표시의 범위를 변경할 수라고합니다. 이렇게하려면, 우리는 그것을 첨부 onclick 버튼 선택 이벤트의 우리의 범위. 저희는 또한 바로 시작할 수 있도록 자막이 제대로 그려진에서 전화를했습니다. 범위 선택 버튼에 대한 마크업은 다음과 같이한다 :

 <button은 1 분기 '08 </ 버튼>을 id="b_0_2">
 <button id="b_3_5"> 질문 '08 </ 버튼>
 <button id="b_6_8"> 분기 '08 </ 버튼>
 <button는 4 분기 '08 </ 버튼>을 id="b_9_11">

 <button은 1 분기 '09 </ 버튼>을 id="b_12_14">
 <button id="b_0_14"> 전체 범위 </ 버튼>

같이 다 모아, 우리가받을 사용자 정의 날짜 형식의 차트를 . 도구 팁은 전체 달 1 년 동안 표시 사항은 X 축 쇼에 라벨 개월 년이 약식 방법.

이 시리즈의 마지막 부분에서 우리는 국제 웹 애플 리케이션을위한 최신의 현지화 알아보겠습니다.

대화 찾기 : 하십시요 Bloglines | 테크노

공유 및 연장 : 북마크와 del.icio.us | Digg Digg에 그것을! | 레딧!