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个月。按照我现在做事的方式，我得到了类似的可怕图表：

Bad graph

我想做什么：

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

我尝试在其他一些帖子（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

PrimeFaces - 自定义日期图表

1 个答案: