jsf - 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属性，但没有任何效果。在大多数情况下，它只会破坏图表

问题:

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

我怎样才能改变 x 轴刻度(比如 1 个月)，每个月只有一个标记，但仍然有图表贯穿所有天点(即我不想平均我的点在一个月内)？

Answer 1

在 Java 中，填写您的 LineChartSeries使用 Date#getTime() 以毫秒为单位的对象.

在 facelets 方面，从 jqPlot site 下载并导入以下 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