Yahoo! User Interface блог (YUIBlog)

Форматирование даты с YUI - Часть III

В первой части мы видели, как легко форматировать дату, используя дата форматирования YUI, так и в части II мы смотрели на форматирование даты для управления DataTable. Теперь мы рассмотрим, как форматировать даты YUI Графики контроля.

Интересно, что это был контрольных карт, что сначала привело к развитию даты форматирования. Мы строили временные ряды диаграммы и необходимые для формата даты по-разному в разных местах. Дата отображается на нашей оси Х должна быть соответствующей области представлены на графике. Например, данные, охватывающие месяца, мы хотели, этикетки, чтобы быть на месяц-уровне, а также данные данные годы, мы хотели показать этикетки месяц и год. Мы также хотели заголовок диаграммы, чтобы показать весь диапазон дат в формате, удобном для человека, как "январь - март 2008 года». Наконец, схема нуждается в подсказке, чтобы показать точную дату точки при наведении мыши.

Мы могли либо сделать все это дата данных в отформатированные строки, используя PHP на сервере, или мы можем отправить исходные данные даты в передней части и иметь JavaScript сделать его соответствующим образом. Мы пошли со вторым вариантом, чтобы уменьшить размер полезной нагрузки, сократить избыточность данных, и, чтобы остаться в соответствие с шаблоном MVC. Единственная проблема, конечно, было то, что форматирования даты в JavaScript не так просто, как PHP, strftime или date функций. Именно тогда мы решили перенести strftime на JavaScript.

Давайте перейдем на примере и попытаться создать диаграмму, как тот, который я описал выше. Мы начнем с YUI графики Пример старт , но вместо того чтобы работать только с месяц строки, мы будем использовать данные, основанные на Unix метки и работы с данными в течение 15 месяцев.

DataSource, должна выглядеть следующим образом:

 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}
	 {Дата: 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;

 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 = 
 [
	 {DisplayName: "Аренда", yField: "аренда"},
	 {DisplayName: "Утилиты", yField: "коммунальные услуги"}
 ];

 / / Определение пользовательской функции для форматирования чисел в качестве валюты по оси Y.
 YAHOO.example.formatCurrencyAxisLabel = функция (стоимость)
 {
	 вернуться YAHOO.util.Number.format (значение,
	 {
		 префикс "$",
		 ThousandsSeparator: ",",
		 DecimalPlaces: 2
	 });
 }

 уаг currencyAxis = новый YAHOO.widget.NumericAxis ();
 currencyAxis.minimum = 800;
 currencyAxis.labelFunction = YAHOO.example.formatCurrencyAxisLabel;

 / / Создаем подсказки, который появляется при наведении курсора мыши вы точку данных
 YAHOO.example.getDataTipText = функции (пункта, индекс серии)
 {
	 уаг ToolTipText = series.displayName + "на" + item.date;
	 ToolTipText + = "\ п" + YAHOO.example.formatCurrencyAxisLabel (пункт [series.yField]);
	 вернуться ToolTipText;
 }

 / / Создать диаграмму
 уаг mychart = новый YAHOO.widget.LineChart ("графика", myDataSource {
		 Серия: seriesDef,
		 xField: «дате»,
		 YAxis: currencyAxis,
		 dataTipFunction: YAHOO.example.getDataTipText
	 }
 );

Эта схема не совсем то, что мы хотели, все же. Он отображает сырья метки в подсказке и на оси абсцисс. Чтобы исправить это, нам нужно настроить оба с использованием даты форматирования. Начните с getDataTipText функции. Обратите внимание на измененные строки выделены жирным шрифтом:

 YAHOO.example.getDataTipText = функции (пункта, индекс серии)
 {
	 VAR г = новая дата (item.date); 
	  уаг sDate = YAHOO.util.Date.format (г, {формате: "% B% Y"});
	 уаг ToolTipText = series.displayName + "на" + sDate;
	 ToolTipText + = "\ п" + YAHOO.example.formatCurrencyAxisLabel (пункт [series.yField]);
	 вернуться ToolTipText;
 }

Мы также должны определить гибкие форматирования метки для X-оси:

 YAHOO.example.xFormat = "% B% D";
 YAHOO.example.formatDate = функция (стоимость)
 {
	 VAR г = новая дата (стоимость);
	 вернуться 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: «дате»,
		 YAxis: 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 [EN] дату.);

	 если (d1.getFullYear (!) = d2.getFullYear ()) {
		 заголовок = YAHOO.util.Date.format (d1, {формате: "% B% Y -"})
					 + YAHOO.util.Date.format (d2, {формате: "% B% Y"});
		 YAHOO.example.xFormat = "% Ъ '% г";
	 } Остальное, если (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% б% Y"});
	     YAHOO.example.xFormat = "%% м-д";
	 }

	 YAHOO.util.Dom.get ("заголовок") InnerHtml = заголовок.

	 / / Перерисовки графика с новыми диапазон данных
	 mychart.refreshData ();
 }

 refreshChart ();

 YAHOO.util.Event.on (document.getElementsByTagName («кнопки»), «клик», refreshChart);

Эта функция вызывается всякий раз, когда мы меняем диапазон отображаемых данных. Чтобы сделать это, мы придаем ей onclick случае наши кнопки выбора диапазона. Кроме того, мы должны называть его в самом начале, так что заголовок составлен правильно. Разметка для кнопок выбора диапазона должен выглядеть следующим образом:

 <button id="b_0_2"> Q1 '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 id="b_12_14"> Q1 '09 </ Button>
 <button id="b_0_14"> всего спектра </ Button>

Собираем все вместе, мы получаем пользовательские даты в формате диаграмм . Обратите внимание, как метки на оси X показать сокращенный месяцы и годы, в то время как подсказка показывает полный месяц и год.

В заключительной части этой серии, мы будем смотреть на дату локализации для интернационализации веб-приложений.

Найти разговоры: Bloglines | Technorati

Делите и расширить: закладки с del.icio.us | Digg It! | Reddit!