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

【问题标题】：Date axis in linechart using primefaces and jqplot使用 primefaces 和 jqplot 的折线图中的日期轴
【发布时间】：2013-03-21 11:23:29
【问题描述】：

我试图展示一个带有 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 元素。通过这些更改，我得到一个空图形。如果我删除 tickInterval 元素，我会在 x 轴上得到类似于每个刻度 111011000001110111000000000-%y

【问题讨论】：

您是否包含了所有需要的插件？ (dateAxisRenderer)
您是否尝试为您的 xaxis 指定最小值和最大值？
是的，但它不起作用。
初始化绘图时使用console.log会出错吗？
你能发布console.log(this.cfg.axes.xaxis)的结果吗？

标签： primefaces jqplot

【解决方案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;

那么它应该可以正常工作了。

【讨论】：

【解决方案2】：

我已经解决了创建这样一个新项目的问题，并且它可以工作。我不知道是什么问题。但我有一个新问题。我刚刚尝试绘制 2013 年 1 月 1 日到 2013 年 1 月 3 日之间的一系列数据，但我只在 1 月份获得数据。这意味着，我得到了一个图，其中 1 月和 2 月的数据在 1 月的同一日期打印。

【讨论】：

【解决方案3】：

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

【讨论】：

您好 Jorge，欢迎来到 Stack Overflow。如果你用一些代码或解释如何导致/解决问题来扩展这个答案，这可能是一个很好的答案。