使用primefaces和jqplot的折线图中的日期轴

时间:2013-03-21 11:23:29

标签: primefaces jqplot

我试图用primefaces和jqplot显示一个折线图。但我不明白。我在我的bean中有这个代码:

CartesianChartModel graphic = new CartesianChartModel(); 
LineChartSeries series = new LineChartSeries();
DateFormat dateFormat = new SimpleDateFormat("mm/dd/yy"); 
String date1 = "01/10/13";
String date2= "01/15/13";
String date3= "02/20/13";

p=dateFormat.parse(date1);
series.set(p.getTime(), 10);
p=dateFormat.parse(date2);
series.set(p.getTime(), 20);
p=dateFormat.parse(date3);
series.set(p.getTime(), 15);

graphic.addSeries(series);

我在扩展器功能中有这个代码:

function extender(){
this.cfg.axes = {
   xaxis :{
      renderer:$.jqplot.DateAxisRenderer, 
      rendererOptions : {
             tickRenderer:$.jqplot.CanvasAxisTickRenderer
      },
      tickOptions : { 
           fontSize:'10pt',
           fontFamily:'Tahoma', 
           angle:-40,
           formatString:'%D'
       }

    };

    this.cfg.axes.xaxis.ticks = this.cfg.categories;
}

问题

它无法正常工作,因为我在其他人之前获得了date3,并且日期没有显示在x轴上。

我刚尝试像PrimeFaces - customise Date Chart那样做。我已经更改了时间格式,并添加了tickInterval元素。通过这些更改,我得到一个空图形。如果我删除{x 1}元素,我会在x轴上得到类似于每个tick tickInterval

的元素

3 个答案:

答案 0 :(得分:1)

好的..我不确定你是否仍然需要这个,但我遇到了类似的问题,这就是我解决它的方法。我还需要放大日期。

首先,primefaces不包含 DateAxisRenderer 。您需要下载它并将其单独添加到您的代码中。你可以在这里得到它 -

DateAxisRenderer.js

然后将其添加到您的代码中,就像这样 -

<h:outputScript library="js/plugins" name="jqplot.dateAxisRenderer.min.js" target="head" />

将文件放在 webapp / js / plugins 下。这可能因项目而异......

然后从支持bean发送日期为 long ,并从您的javascript中删除以下行 -

this.cfg.axes.xaxis.ticks = this.cfg.categories;

它应该正常工作。

答案 1 :(得分:0)

我已经解决了我的问题,创建了一个像这样的新项目并且它有效。我不知道是什么问题。 但我有一个新问题。 我刚试图在01/01/2013和01/03/2013之间绘制一系列数据,我只在1月份获得数据。这意味着,我在1月份的同一天打印了一月和二月的数据。

答案 2 :(得分:0)

您必须使用epoch millis设置X轴值。我不得不弄清楚。