雅虎用户界面博客（YUIBlog）

日期格式与锐-第三部分

在第一部分中，我们看到了如何轻松地格式化一个日期使用YUI的日期格式化并在第二部分我们控制看着DataTable的格式化日期为。 我们现在就在研究如何格式化日期锐图表控制。

有趣的是，这是图表控制，首先导致了日期格式化的发展。 我们正在建立一个时间序列图，需要在不同地点不同格式的日期。 我们的X一起显示的日期需要的是适当的范围内轴的图表来表示。 例如，对于跨越个月的数据，我们希望的标签将在一个月的天的水平，并为数据的数据里，我们想的标签，显示月份和年份。 我们也想图表的标题显示在一个人喜欢的格式整个日期范围“1至3月2008”。 最后，图表需要一个工具提示以显示鼠标悬停点的确切日期。

我们既可以呈现到预先格式化串此日期的所有数据在后端使用了PHP，或者我们可以把原始日期数据到前端的JavaScript，并适当地加以渲染。 我们去的第二个选项，以减少有效载荷的大小，减少数据冗余，并留在更符合MVC模式。 唯一的问题，当然，是在JavaScript中的日期格式是不是很容易，因为PHP strftime或date的功能。 这时候，我们决定到港口strftime到JavaScript。

现在，让我们进行一个例子，尝试建立一个像我上面描述的一个图表。 我们将开始与锐图表快速入门示例 ，而是字符串的工作只有一个月，我们将使用15个月的数据基础上的Unix时间戳数据和工作。

数据源应该是这样的：

 YAHOO.example.expenses =
 [
     / /注意：对于UNIX纪元开始的时间戳记输出秒，
     / /所以乘以1000得到一个JS时间戳
	 {日期：1199174400000，租金：880.00，水电费：894.68}，
	 {日期：1201852800000，租金：880.00，水电费：901.35}，
	 {日期：12043.584亿，租金：880.00，水电费：889.32}，
	 {日期：12070.332亿，租金：880.00，水电费：884.71}，
	 {日期：1209625200000，租金：910.00，水电费：879.811}，
	 {日期：一二一二三零三六零零零零零，租金：910.00，水电费：897.95}，
	 {日期：1214895600000，租金：910.00，水电费：894.68}，
	 {日期：12175.74亿，租金：910.00，水电费：901.35}，
	 {日期：12202.524亿，租金：910.00，水电费：889.32}，
	 {日期：1222844400000，租金：910.00，水电费：884.71}，
	 {日期：一万二千二百五十五点二二八亿，租金：910.00，水电费：889.81}，
	 {日期：12281.184亿，租金：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 = 
 [
	 {显示名称：“租”，yField：“租金”}，
	 {显示名称：“工具”，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 + =“\ 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 =功能（项目，指标，系列）
 {
	 风险ð =新的日期（item.date）; 
	  风险sDate = YAHOO.util.Date.format的（四，{格式：“％乙％Y”型}）;
	风险的ToolTipText = series.displayName +“为”+ sDate;
	的ToolTipText + =“\ N”的+ YAHOO.example.formatCurrencyAxisLabel（项目[series.yField]）;
	返回的ToolTipText;
 }

我们还需要定义为X轴灵活的标签格式：

 YAHOO.example.xFormat =“％B级为％d”;
 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：“日期”，
		 Y轴：currencyAxis，
		 X轴：timeAxis，
		 dataTipFunction：YAHOO.example.getDataTipText
	 }
 ）;

最后，我们写了一个小功能，来绘制标题和变更X轴标签的格式。

功能refreshChart（）{
	如果（这个＆＆＆＆this.nodeName.toUpperCase this.nodeName（）=='按钮'）{
		 VaR的范围= this.id.split ("_");
		圣= parseInt函数（范围[1]，10）;
		恩= parseInt函数（范围[2]，10）;
	 }
	 VaR的标题= '';
	 D1的风险值=新的日期（YAHOO.example.expenses [圣]的日期。）;
	 D2的风险值=新的日期（[英文]日期YAHOO.example.expenses。）;

	如果（d1.getFullYear（）！= d2.getFullYear（））{
		标题= YAHOO.util.Date.format（首长，{格式：“％％的B Ÿ - ”}）
					 + YAHOO.util.Date.format的（氘，{格式：“％的B％Y”型}）;
		 YAHOO.example.xFormat =“％B级'％Y”型;
	 }否则如果（d1.getMonth（）！= d2.getMonth（））{
		标题= YAHOO.util.Date.format（首长，{格式：“％B级 - ”}）
					 + YAHOO.util.Date.format的（氘，{格式：“％的B％Y”型}）;
		 YAHOO.example.xFormat =“％B级”;
	还有{}
		标题= YAHOO.util.Date.format（首长，{格式：“％d个％的B - ”}）
					 + YAHOO.util.Date.format的（氘，{格式：“％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">第一季度'08 </按钮>“
第二季度'08 </按钮>“<button id="b_3_5">
 <button id="b_6_8">第三季度'08 </按钮>“
 <button id="b_9_11">第四季'08 </按钮>“

 <button id="b_12_14">第一季度'09 </按钮>“
 <button id="b_0_14">整个范围</按钮>“

把他们放在一起，我们得到一个自定义日期格式的图表 。 请注意如何在X轴的标签显示略个月，年，而刀尖显示完整的月份和年份。

在本系列的最后一部分，我们将着眼于国际化的网络应用程序的日期定位。

查找谈话： bloglines | Technorati的

共享和扩展： 书签和书签 | Digg它！ | reddit！