3

事情就是这样。我有很多包含 java.sql.Timestamp 和(为简单起见)作为数据的 int 的持久“快照”。

我有一个 JSF 页面,其中包含一个 primefaces 3.4.1 <p:lineChart>,后面是一个包含图表模型的 ManagedBean。

假设我然后选择一个时间范围并获取该范围之间的所有快照。并使用所有时间戳(x 轴)和所有整数(y 轴)填充图表的数据模型。

所以我在填充时做的是:

data = new HashMap<Object, Number>();        
List<Snapshot> allSnapshots = persistenceService.getAllSnapshots();
for(int i = 0; i < allSnapshots.size(); i++) {
    Snapshot s = allSnapshots.get(i);
    data.put(new Date(s.getTimestamp().getTime()), s.getData());
}
chartModel.getSeries().get(0).setData(data);

(注意:在示例代码中,我只是获取所有快照,因为我很快就生成了一百个左右)。

我这样设置图表:

<p:lineChart id="chart" value="#{backingBean.chartModel}" xaxisAngle="-90">
   <f:convertDateTime pattern="HH:mm:ss"/>
</p:lineChart>

它工作正常,但是当模型包含一百个数据点时,xaxis 只是挤满了所有的刻度线。

然后我所做的是使用 primefaces 的选项来使用 jqplot 扩展器功能。所以我只是添加extender="extend"了图表的属性,extend下面的 js 函数在哪里:

function extend() {
      this.cfg.axes = {
          xaxis: {
              renderer: $.jqplot.DateAxisRenderer,
              rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer },
              tickOptions: {
                  showGridline: true,
                  formatString: '%H:%M',
                  angle: -90                        
             }         
         }
     }
}

这是它的当前版本。经过数小时的阅读和反复试验,我仍然无法正确,因为以下事情永远不会正确:

  • 刻度线永远不会被渲染,因为 Date 永远不会被转换。目前这只是被忽略并显示 formatString 本身......
  • 在实际数据的左侧和右侧创建了额外的刻度线,我不希望这样。
  • 当我只提供autoscale: truejqplot 扩展器的选项时,我希望标记之间的间距正常。但随后发生的是,间距很酷,但原始日期标签变成了从 0 到可用数据量的纯数字..!?

处理这个问题我有点累了……也许我在做一些根本错误的事情。否则我不知道为什么这么复杂..

感谢您的任何建议!

干杯

克里斯


编辑:

好的,感谢 perissf,我检查了这个:https ://stackoverflow.com/a/14287971/870122

使用建议的扩展器,我得到以下输出: http ://www.abload.de/img/clipboard01y6sgj.png

(抱歉,由于新用户限制,我无法直接发布图片:-/)

如您所见,刻度线正确呈现为 HH:MM,这非常好。但是你也可以看到另一个非常奇怪的问题发生了:

快照的给定时间范围是

  • 开始时间:2013-01-28 13:01:25.415
  • 结束时间:2013-01-28 13:14:32.145

当 JVM 在 glassfish 配置中设置为 UTC 时,我使用 System.currentTimeMillis() 将这些作为 UTC 时间戳收集起来。

如您所见,图中的数据点移动了一小时,它们从 14:01 开始,看起来这些值已自动转换为我当前的时区,即 UTC+1。但是最左边的 xaxis 刻度位于 13:00 的原始 UTC 值附近。

我收集时间戳 UTC,因为我不知道应用程序将在哪个实际时区运行,但我想显示“转换后的”时间值。所以自动切换到我的时区是一个不错的功能,但 xaxis 缩放实际上并不好和奇怪。

任何建议我如何摆脱它?

干杯

克里斯


编辑2:

好的,在使用 Firebug 调试渲染页面时,我偶然发现了绘图对象中的 jqplot 内部变量,它似乎包含 xaxis 的最小值和最大值。最小值设置为 13:00 左右的原始最小 UTC 值,最大值设置为 14:15 左右的偏移 UTC+1 值。

不知何故,最小值不会随着自动时区调整而相应移动。

所有其他值,即 dataBounds、数据本身等,都很好地移动了一小时。

我在Bitbucket jqplot 问题跟踪器上打开了一个问题

让我们来看看。

再见

克里斯

4

2 回答 2

0

我终于调试了 jqplot 渲染器,发现了一些导致这种行为的代码行。

对于任何感兴趣的人,请在此处的评论部分中找到错误修复: Bitbucket 问题跟踪器

谢谢你的帮助

于 2013-02-01T13:10:44.407 回答
0

我对此修复非常感兴趣,但 BitBucket 上的问题位于受限区域,因此我无法访问它。所以我不得不自己尝试修复这个 AxisDateRenderer,幸运的是我做到了:)

所以 Primefaces (6.0) 图表使用旧版本的 JQPlot 库。此版本中的一个错误将最小日期轴边界设置为不完全是第一个值,而是根据用户浏览器的区域设置时区较旧的时间。例如,如果第一个值是 12:00 并且您的 GMT 是 GMT+1,那么日期轴界限最小值将是 11:00 而不是 12:00!

最小谷

应该替换以下行(在 createTicks 函数中)(注意代码在下面编写)

ad = ad.getTime() + ad.getUtcOffset();

通过下一行:

ad = Math.floor((ad.getTime() - ad.getUtcOffset())/r) * r + ad.getUtcOffset();

要替换的非缩小行:

min = min.getTime()  + min.getUtcOffset();

和:

 min = Math.floor((min.getTime() - min.getUtcOffset())/tempti) * tempti + min.getUtcOffset();

请注意,我已尝试将 Primefaces 的 chart.js 更新为早期版本,但该图表不再起作用。我将等待 Primefaces 的下一次更新,希望使用更新的版本。我也不知道 Primefaces 6.0 使用的是哪个版本的 JQPlot

于 2016-09-08T10:05:06.547 回答