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

问题：

1234563时间而不仅仅是日期。这是由于浏览器对本地时间的处理与 UTC 与裸日期的不一致。" 在我的图形 bean 中，我应该使用 javascript 时间戳（“yyyy-MM-dd h:mma”）之后的格式化日期（字符串）还是直接使用 java.util.Date 来填充系列？李>

1. 如何更改 x 轴刻度（例如 1 个月），每个月只有一个标记，但仍然有图表通过所有天点（即我不想平均我这个月的积分）？

Answer 1

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

在 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