PrimeFaces - 自定义日期图表 [英] PrimeFaces - customise Date Chart
问题描述
我使用PrimeFaces 3.4.1绘制时间图（x轴上的日期，y轴上的int值）。
目前我有东西像这样：
xhtml ：
< p：lineChart id =timeChartvalue =＃{myGraphBean.model}legendPosition =etitle =Time ChartminY =0maxY =25style =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.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（我的系列）;
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个月。用我现在做事情的方式，我得到如此可怕的图表：
我想要做什么：
我希望能够保留我的数据点，但只显示一个勾号，比方说每个月。
我试图改变x轴跟着其他一些帖子（ ex1 ， ex2 ）但我无法完成工作。
使用primefaces扩展器，我尝试使用诸如 tickInterval：'1 month'之类的东西，设置 min 属性，但没有任何工作。在大多数情况下，它只会破坏图表
问题：
-
在jqPlot文档中，它说注意，尽管jqPlot将解析大多数人可读的日期，但在可能的情况下使用javascript时间戳是最安全的。指定一个日期和时间，而不仅仅是一个日期，这是由于本地时间的浏览器处理与日期为UTC的浏览器不一致。
在我的图形bean中，我应该使用在JavaScript时间戳（yyyy-MM-dd h：mma）或直接使用java.util.Date之后的格式化日期（String）？ 我怎样才能改变X轴刻度（比方说1个月），每个月只有一个标记，但仍然有图表经历了所有的一天点（即我不想平均每月的点数） 在Java中，填写 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?
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)?
LineChartSeries 对象的时间以毫秒为单位使用日期＃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：{
渲染器：$ .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;
$ b $ p
$ b 有用的链接：
http://forum.primefaces.org/viewtopic.php?f=3& t = 25289＃p79916
http://forum.primefaces.org/viewtopic.php?f=3&t=23891&p=78637#p78637
I am using PrimeFaces 3.4.1 to plot time chart (Date on x-axis, int value on y-axis).
At the moment I have something like that:
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);
}
So my bean just creates some random int value for each day. (My application produces actual data points, this is just a dummy example)
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:
What I would like to do:
I'd like to be able to keep my data point but only display a tick, let's say every month.
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.
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
Questions:
解决方案 In Java, fill your LineChartSeries objects with times in milliseconds using Date#getTime().
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" />
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;
}
Useful links:
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屋！
