PrimeFaces - 自定义日期图表

Question

我使用PrimeFaces 3.4.1绘制时间图(x轴上的日期,y轴上的int值).

目前我有类似的东西:

xhtml:

<p:lineChart id="timeChart" value="#{myGraphBean.model}" legendPosition="e" title="Time Chart" minY="0" maxY="25" style="height:300px"/>

Java bean:

private final static int MAX_VALUE = 20;
private final static int NUMBER_OF_POINTS = 20;
private final static DateFormat dateFormat = new SimpleDateFormat("dd-MM-yy");

private void createLinearModel() {
    model = new CartesianChartModel();
    Calendar day = Calendar.getInstance();
    day.set(Calendar.HOUR_OF_DAY, 0);
    day.set(Calendar.MINUTE, 0);
    day.set(Calendar.SECOND, 0);
    day.set(Calendar.MILLISECOND, 0);
    LineChartSeries series = new LineChartSeries();
    series.setLabel("My series");
    for (int i = 0; i < NUMBER_OF_POINTS; i++) {
        series.set(dateFormat.format(day.getTime()), getRandomValue());
        day.add(Calendar.DAY_OF_MONTH, 1);
    }
    model.addSeries(series);
}

private int getRandomValue() {
    return rand.nextInt(MAX_VALUE);
}

所以我的bean只为每一天创建一些随机的int值.(我的应用程序生成实际数据点,这只是一个虚拟示例)

在我的应用程序中,我在很长一段时间内生成数据,例如6个月.随着我现在做事的方式,我得到了可怕的图形:

我想做什么:

我希望能够保留我的数据点,但只显示一个勾号,让我们说每个月.

我试图在其他一些帖子(ex1,ex2)之后更改x轴上的刻度,但我无法使其工作.

使用primefaces扩展器,我尝试使用类似的东西tickInterval: '1 month',设置min属性但没有任何效果.在大多数情况下,它只会破坏图表

问题:

1. 在jqPlot文档中,它说" 注意,尽管jqPlot将解析大多数人类可读的日期,但是在可能的情况下使用javascript时间戳是最安全的.此外,最好指定日期和时间而不仅仅是日期.是由于浏览器处理本地时间与UTC与裸日期不一致. "在我的图表bean中,我应该使用javascript时间戳("yyyy-MM-dd h:mma")之后的格式化日期(字符串)来填充系列. )或直接使用java.util.Date？

2. 我怎样才能更改x轴刻度(比如让我们说1个月),每个月只有一个标记,但仍然可以让图表经历所有日期点(即我不想平均我的月份点数) )？

Answer 1

在Java中,LineChartSeries使用时间以毫秒为单位填充对象Date#getTime().

在facelets一侧,从jqPlot站点下载并导入以下jqPlot插件:

<h:outputScript name="Javascript/jqplot.canvasAxisTickRenderer.js" />
<h:outputScript name="Javascript/jqplot.canvasAxisTickRenderer.min.js" />
<h:outputScript name="Javascript/jqplot.dateAxisRenderer.js" />
<h:outputScript name="Javascript/jqplot.dateAxisRenderer.min.js" />

并将此js扩展器用于p:lineChart组件:

function chartExtender() {
    this.cfg.axes = {
        xaxis : {
            renderer : $.jqplot.DateAxisRenderer, 
            rendererOptions : {
                tickRenderer:$.jqplot.CanvasAxisTickRenderer
            },
            tickOptions : { 
                fontSize:'10pt',
                fontFamily:'Tahoma', 
                angle:-40
            }
        },
        yaxis : {
            rendererOptions : {
                tickRenderer:$.jqplot.CanvasAxisTickRenderer
            },
            tickOptions: {
                fontSize:'10pt', 
                fontFamily:'Tahoma', 
                angle:30
            }
        }               
    };
    this.cfg.axes.xaxis.ticks = this.cfg.categories;
}

有用的链接:

http://forum.primefaces.org/viewtopic.php?f=3&t=25289#p79916

http://forum.primefaces.org/viewtopic.php?f=3&t=23891&p=78637#p78637