jQuery jqplot日期未正确显示

时间:2012-07-13 10:10:35

标签: javascript jquery jqplot

我的jqplot图表有问题。

<script type="text/javascript" src="/js/jplot/jquery.jqplot.min.js"></script> 
<script type="text/javascript" src="/js/jplot/plugins/jqplot.dateAxisRenderer.min.js"></script> 


<script type="text/javascript" > 
$(document).ready(function(){
    var data = [["25 August 2002", 299.75],["02 September 2002", 1511.22],["02 October 2002", 1967.00],["01 November 2002", 2335.80],["02 December 2002", 2008.15],["02 January 2003", 4579.52],["02 February 2003", 5253.98],["07 March 2003", 5491.12],["01 April 2003", 8937.26],["08 May 2003", 16520.95],["01 June 2003", 13725.03],["01 July 2003", 22800.12],["11 August 2003", 34828.20],["01 September 2003", 48176.53],["01 October 2003", 57216.98],["01 November 2003", 45644.96],["01 December 2003", 50927.94],["01 January 2004", 51279.52],["01 February 2004", 41711.34],["01 March 2004", 49790.00],["01 April 2004", 49686.61],["01 May 2004", 40634.78],["22 August 2004", 16889.98],["01 September 2004", 41684.68],["29 June 2006", 151.55],["25 March 2008", 469.75],["17 July 2008", 159.90],["04 August 2008", 719.55],["11 December 2009", 94.00],["01 December 2010", 449.95],["01 April 2011", 449.95],["01 June 2012", 4529.40]];
    var plot1 = $.jqplot('chartdiv', [data],
        {
            axes:{
                yaxis:{
                    label: 'Subs. Revenue',
                    tickOptions:{
                        formatString:'R%.2f'
                    },
                    min: 0

                },
                xaxis:{
                    label: 'Period',
                    renderer:$.jqplot.DateAxisRenderer,
                    tickOptions:{
                        formatString:'%b-%y'
                    },
                    pad: 1.2
                }
            }
        }
)
});
</script> 
<div id="chartdiv" style="height:600px;width:1000px; "></div> 

当我查看图表时,它只显示xaxis点为“Jan 01”,“Jan 02”,“Jan 03”等。出现这种情况的原因是什么原因?

编辑附上一个img来显示错误。 Every thing is Jan on x-axis

2 个答案:

答案 0 :(得分:2)

以下是根据要求支持的日期轴渲染使用格式

 %Y      2008                Four-digit year
  %y      08                  Two-digit year
              == Months ==
  %m      09                  Two-digit month
  %#m     9                   One or two-digit month
  %B      September           Full month name
  %b      Sep                 Abbreviated month name
              == Days ==
  %d      05                  Two-digit day of month
  %#d     5                   One or two-digit day of month
  %e      5                   One or two-digit day of month
  %A      Sunday              Full name of the day of the week
  %a      Sun                 Abbreviated name of the day of the week
  %w      0                   Number of the day of the week (0 = Sunday, 6 = Saturday)
  %o      th                  The ordinal suffix string following the day of the month
              == Hours ==
  %H      23                  Hours in 24-hour format (two digits)
  %#H     3                   Hours in 24-hour integer format (one or two digits)
  %I      11                  Hours in 12-hour format (two digits)
  %#I     3                   Hours in 12-hour integer format (one or two digits)
  %p      PM                  AM or PM
              == Minutes ==
  %M      09                  Minutes (two digits)
  %#M     9                   Minutes (one or two digits)
              == Seconds ==
  %S      02                  Seconds (two digits)
  %#S     2                   Seconds (one or two digits)
  %s      1206567625723       Unix timestamp (Seconds past 1970-01-01 00:00:00)
              == Milliseconds ==
  %N      008                 Milliseconds (three digits)
  %#N     8                   Milliseconds (one to three digits)
              == Timezone ==
  %O      360                 difference in minutes between local time and GMT
  %Z      Mountain Standard Time  Name of timezone as reported by browser
  %G      -06:00              Hours and minutes between GMT
              == Shortcuts ==
  %F      2008-03-26          %Y-%m-%d
  %T      05:06:30            %H:%M:%S
  %X      05:06:30            %H:%M:%S
  %x      03/26/08            %m/%d/%y
  %D      03/26/08            %m/%d/%y
  %#c     Wed Mar 26 15:31:00 2008  %a %b %e %H:%M:%S %Y
  %v      3-Sep-2008          %e-%b-%Y
  %R      15:31               %H:%M
  %r      3:31:00 PM          %I:%M:%S %p

答案 1 :(得分:0)

考虑到您的评论,我认为您需要%b-%Y而不是%b-%y

A code sample showing the use of '%b-%Y'.

Also for all supported format types please see.您还可以注意到,提供的代码示例显示了如何添加自定义日期格式,只需使用'%Q'作为formatString即可查看其工作原理。