7

我正在使用 PrimeFaces 3.4.1 绘制时间表（x 轴上的日期，y 轴上的 int 值）。

目前我有这样的事情：

html :

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

爪哇豆：

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 个月），每个月只有一个标记，但仍然有图表通过所有的天点（即我不想在一个月内平均我的点)?

4

1 回答 1

6

在 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

于 2013-01-11T22:53:11.760 回答