PrimeFaces - 自定义日期图表 [英] PrimeFaces - customise Date Chart

问题描述

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

I am using PrimeFaces 3.4.1 to plot time chart (Date on x-axis, int value on y-axis).

目前我有这样的事情:

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 值.(我的应用程序生成实际数据点，这只是一个虚拟示例)

So my bean just creates some random int value for each day. (My application produces actual data points, this is just a dummy example)

在我的应用程序中，我在很长一段时间内生成数据，例如 6 个月.按照我现在做事的方式，我得到了这样可怕的图表:

In my application, I am generating data over a long time, for example 6 months. With the way I am doing things now, I get horrible graphs like that:

我想做什么:

我希望能够保留我的数据点，但只显示一个勾号，比如每个月.

I'd like to be able to keep my data point but only display a tick, let's say every month.

我尝试在其他一些帖子之后更改 x 轴上的刻度(ex1, ex2) 但我无法得到它起作用了.

I have tried to change the tick on the x-axis following a few other posts (ex1, ex2) but I couldn't get it work.

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

Using the primefaces extender, I tried to use things like tickInterval: '1 month', setting the min attributes but nothing worked. In most of the case it would just break the graph

问题:

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

1. In the jqPlot doc, it says "Note, although jqPlot will parse most any human readable date, it is safest to use javascript time stamps when possible. Also, it is best to specify a date and time and not just a date alone. This is due to inconsistent browser handling of local time vs. UTC with bare dates." In my graph bean, shall I populate the series using a formatted date (String) following the javascript time stamp ("yyyy-MM-dd h:mma") or using a java.util.Date directly?

我如何更改 x 轴刻度(假设为 1 个月)，每个月只有一个标记，但仍然让图表经过所有天点(即我不想平均我这个月的积分)?

How can I change the x-axis tick (for let's say 1 month), having a marker only every month, but still have the graph going through all the day points (i.e. I don't want to average my the points over the month)?

推荐答案

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

In Java, fill your LineChartSeries objects with times in milliseconds using Date#getTime().

在 facelets 方面，从 jqPlot 站点下载并导入以下 jqPlot 插件:

On the facelets side, download from jqPlot site and import the following jqPlot plugins:

<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" />

并为 p:lineChart 组件使用这个 js 扩展器:

And use this js extender for p:lineChart component:

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 - 自定义日期图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！