واجهة مستخدم مدونة (YUIBlog)

تاريخ تنسيق مع يوي -- الجزء الثالث

في الجزء الأول ، رأينا كيف أن بسهولة تنسيق موعد به في تاريخ يوي والمنسق في الجزء الثاني نظرنا في تنسيق مواعيد لمراقبة DataTable. ونحن الآن أن نلقي نظرة على كيفية تنسيق التواريخ ل رسوم بيانية يوي السيطرة.

ومن المثير للاهتمام ، وكان مراقبة الرسوم البيانية التي أدت أولا إلى تطوير المنسق الميلاد. كنا مخطط بناء سلاسل زمنية وتحتاج إلى تنسيق التواريخ بشكل مختلف في مواقع مختلفة. عرض التواريخ لدينا على طول المحور السيني اللازمة لتكون ملائمة لهذه المجموعة التي يمثلها الرسم البياني. على سبيل المثال ، للبيانات تمتد شهرا ، أردنا أن تكون التسميات على مستوى الشهر ، اليوم ، ومنذ سنوات بيانات البيانات ، أردنا التسميات لإظهار الشهر والسنة. أردنا أيضا شرح للتخطيط لإظهار مدى التاريخ كله في شكل مباراة ودية الإنسان مثل "يناير.-مارس. 2008". وأخيرا ، تحتاج إلى رسم توولتيب لعرض التاريخ الدقيق لنقطة تحوم الماوس.

يمكننا تقديم إما جميع هذه البيانات إلى سلاسل تاريخ ما قبل تهيئتها باستخدام بي إتش بي على النهاية الخلفية ، أو أن ترسل البيانات الميلاد الخام إلى الواجهة الأمامية وجعل جافا سكريبت بشكل مناسب. ذهبنا مع الخيار الثاني لتقليل حجم الحمولة ، والحد من تكرار البيانات ، والبقاء أكثر انسجاما مع نمط بعثة التحقق المشتركة. المشكلة الوحيدة ، بالطبع ، كان هذا التنسيق التاريخ في جافا سكريبت ليست سهلة كما فب في strftime أو date المهام. وذلك عندما قررنا إلى ميناء strftime لجافا سكريبت.

دعنا الآن المضي قدما مثالا ومحاولة لإنشاء تخطيط مثل واحد كنت الموصوفة أعلاه. سنبدأ مع رسوم بيانية يوي مثال التشغيل السريع ، ولكن بدلا من العمل مع سلاسل الشهر فقط ، سنستخدم البيانات على أساس الطوابع الزمنية يونكس البيانات والتعامل معها لمدة 15 شهرا.

وينبغي أن مصدر بيانات تبدو هذه :

 YAHOO.example.expenses =
 [
     / / ملاحظة : يونكس ثانية انتاج الطوابع الزمنية منذ عهد ،
     / / ضرب ذلك بحلول عام 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}
 ] ؛

 فار ش = 0 ؛ أون = 1 - YAHOO.example.expenses.length ؛

 YAHOO.example.getData = الدالة () {
	 فار البيانات = [] ؛
	 ل (فار ط = ش ؛ ط <= أون ، وأنا + +) (
		 data.push (YAHOO.example.expenses [أنا]) ؛
	 }
	 عودة البيانات ؛
 }

 فار = myDataSource جديدة YAHOO.util.DataSource (YAHOO.example.getData) ؛
 myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY ؛
 myDataSource.responseSchema =
 {
	 الحقول : ["تاريخ" ، "إيجار" ، "المرافق"]
 } ؛

نحن نستخدم الدالة لإرجاع البيانات حتى نتمكن من العودة مجموعات فرعية من ذلك على أساس مختلف مشغلات.

سنقوم بإعداد أكثر من الرسم البياني لدينا مثل على سبيل المثال :

 / / تعريف سلسلة متعددة
 فار seriesDef = 
 [
	 {العرض : "إيجار" ، yField : "إيجار"} ،
	 {العرض : "المرافق" ، yField : "المرافق"}
 ] ؛

 / / تعريف دالة مخصصة لتنسيق الأرقام كعملة على طول محور ص
 YAHOO.example.formatCurrencyAxisLabel = وظيفة (القيمة)
 {
	 YAHOO.util.Number.format عودة (القيمة ،
	 {
		 بادئة : "$" ،
		 thousandsSeparator : "،" ،
		 المنازل العشرية : 2
	 }) ؛
 }

 currencyAxis فار = YAHOO.widget.NumericAxis جديدة () ؛
 currencyAxis.minimum = 800 ؛
 currencyAxis.labelFunction = YAHOO.example.formatCurrencyAxisLabel ؛

 / / إنشاء تلميح الأداة التي تظهر عند تمرير الماوس نقطة بيانات
 YAHOO.example.getDataTipText = وظيفة (البند ، مؤشر ، سلسلة)
 {
	 قاموس فار = series.displayName + "للجمع" + item.date ؛
	 قاموس + = "\ ن" + YAHOO.example.formatCurrencyAxisLabel ([series.yField] البند) ؛
	 عودة قاموس ؛
 }

 / / إنشاء التخطيط
 فار = mychart جديدة YAHOO.widget.LineChart ("المخطط" ، myDataSource ، {
		 سلسلة : seriesDef ،
		 xField : "التاريخ" ،
		 العمودي : currencyAxis ،
		 dataTipFunction : YAHOO.example.getDataTipText
	 }
 (؛)

هذا المخطط ليس تماما ما كنا نريده بالرغم من ذلك. فإنه يعرض الطوابع الزمنية الخام في تلميح الأداة وعلى المحور السيني. لتصحيح هذا ، نحن بحاجة إلى تخصيص كل من هذه باستخدام المنسق الميلاد. تبدأ getDataTipText وظيفة. ملاحظة تغيير ملحوظ في خطوط جريئة :

 YAHOO.example.getDataTipText = وظيفة (البند ، مؤشر ، سلسلة)
 {
	 فار د = تاريخ جديد (item.date) ؛ 
	  sDate فار = YAHOO.util.Date.format (د ، {شكل : "٪ ٪ ب نعم"}) ؛
	 قاموس فار = series.displayName + "للجمع" + sDate ؛
	 قاموس + = "\ ن" + YAHOO.example.formatCurrencyAxisLabel ([series.yField] البند) ؛
	 عودة قاموس ؛
 }

ونحن بحاجة أيضا لتحديد المنسق تسمية مرنة لمحور س :

 YAHOO.example.xFormat = "٪ ٪ د ب" ؛
 YAHOO.example.formatDate = وظيفة (القيمة)
 {
	 فار د الموعد الجديد = (القيمة) ؛
	 YAHOO.util.Date.format عودة (د ، {YAHOO.example.xFormat}) ؛
 }

 timeAxis فار = YAHOO.widget.TimeAxis جديدة () ؛
 timeAxis.majorTimeUnit = "شهر" ؛
 timeAxis.labelFunction = YAHOO.example.formatDate ؛

وتمرير هذا في منشئ التخطيط. ملاحظة التغييرات على منشئ في وقت سابق ملحوظ في جريئة.

 فار = mychart جديدة YAHOO.widget.LineChart ("المخطط" ، myDataSource ، {
		 سلسلة : seriesDef ،
		 xField : "التاريخ" ،
		 العمودي : currencyAxis ،
		 xAxis : timeAxis ،
		 dataTipFunction : YAHOO.example.getDataTipText
	 }
 (؛)

وأخيرا ، ونحن نكتب وظيفة قليلا لرسم التسمية التوضيحية وتغيير شكل تسمية محور س.

 refreshChart الدالة () {
	 إذا كان (هذا & & & & this.nodeName this.nodeName.toUpperCase () 'زر' ==) {
		 مجموعة فار = this.id.split ("_")؛
		 ش = parseInt (النطاق [1] ، 10) ؛
		 أون = parseInt (مجموعة [2] ، 10) ؛
	 }
	 فار ''عنوان = ؛
	 فار = D1 تاريخ جديد (YAHOO.example.expenses [ش] تاريخ النشر) ؛
	 فار D2 تاريخ جديد = (YAHOO.example.expenses [أون] الميلاد) ؛

	 إذا كان (d1.getFullYear ()! = d2.getFullYear ()) {
		 عنوان = YAHOO.util.Date.format (D1 ، {شكل : "٪ ب نعم ٪ --"})
					 + YAHOO.util.Date.format (D2 ، {شكل : "٪ ٪ ب نعم"}) ؛
		 YAHOO.example.xFormat = "٪ ب' ذ ٪ "؛
	 } والا اذا (d1.getMonth ()! = d2.getMonth ()) {
		 عنوان = YAHOO.util.Date.format (D1 ، {شكل : "٪ ب --"})
					 + YAHOO.util.Date.format (D2 ، {شكل : "٪ ٪ ب نعم"}) ؛
		 YAHOO.example.xFormat = "ب ٪" ؛
	 {} آخر
		 عنوان = YAHOO.util.Date.format (D1 ، {شكل : "٪ د ٪ ب --"})
					 + YAHOO.util.Date.format (D2 ، {شكل : "٪ ٪ د ب ، ص ٪"}) ؛
	     YAHOO.example.xFormat = "م ٪ - ٪ دال" ؛
	 }

	 YAHOO.util.Dom.get ("شرح") innerHTML = التوضيحية.

	 / / رسم على الرسم البياني مع مجموعة جديدة من البيانات
	 mychart.refreshData () ؛
 }

 refreshChart () ؛

 YAHOO.util.Event.on (document.getElementsByTagName ('زر') ، 'فوق' ، refreshChart) ؛

يتم استدعاء هذه الدالة كلما قمنا بتغيير مجموعة من البيانات المعروضة. للقيام بذلك ، ونحن نعلق على onclick الحدث من مجموعة أزرار اختيارنا. علينا أيضا أن يطلق عليه الحق في بداية بحيث يتم رسمها التوضيحية بشكل صحيح. وينبغي للتوصيف لأزرار اختيار مجموعة تبدو هذه :

 id="b_0_2"> <buttonQ1 '08</ زر>
 <buttonid="b_3_5"> Q2 '08</ زر>
 <buttonid="b_6_8"> Q3 '08</ زر>
 id="b_9_11"> <buttonQ4 '08</ زر>

 id="b_12_14"> <buttonQ1 '09</ زر>
 id="b_0_14"> <buttonبالكامل مجموعة </ زر>

وضع كل ذلك معا ، وحصلنا على موعد - تنسيق التخطيط المخصص . لاحظ كيف أن التسميات على المحور السيني عرض مختصر أشهر وسنة ، في حين يظهر تلميح الأداة شهر كامل والسنة.

في الجزء الأخير من هذه السلسلة ، سوف نبحث في تاريخ لتوطين تطبيقات الانترنت تدويلها.

العثور على المحادثات : المدونات | ستثمبليوبون

وتوسيع نطاق مشاركة : احفظ مع del.icio.us | يسو أنها! | صديق!