Primefaces和jqplot - p：lineChart不与Date轴和tick间隔绘图

Question

我在这个论点上看到了其他一些帖子（请参阅here，here和here），但我无法让我的代码发挥作用。

管理bean：

public void loadGraphic()
{
  linearModel = new CartesianChartModel();
  LineChartSeries series = new LineChartSeries();

  Calendar cal = Calendar.getInstance();
  cal.set(Calendar.YEAR, 2013);
  cal.set(Calendar.MONTH, 10);
  cal.set(Calendar.DAY_OF_MONTH, 19);
  cal.set(Calendar.HOUR_OF_DAY, 2);
  cal.set(Calendar.MINUTE, 33);
  cal.set(Calendar.SECOND, 47);

  minX = new Timestamp(cal.getTimeInMillis());
  minY = new Double("1.44");
  maxY = new Double("1.829");

  measures = new ArrayList<TriggerGraphicalData>();
  measures.add(new TriggerGraphicalData(new Timestamp(cal.getTimeInMillis()), new Double("1.72")));
  cal.set(Calendar.HOUR_OF_DAY, 2);
  cal.set(Calendar.MINUTE, 48);
  cal.set(Calendar.SECOND, 59);
  measures.add(new TriggerGraphicalData(new Timestamp(cal.getTimeInMillis()), new Double("1.735")));
  cal.set(Calendar.HOUR_OF_DAY, 3);
  cal.set(Calendar.MINUTE, 11);
  cal.set(Calendar.SECOND, 02);
  measures.add(new TriggerGraphicalData(new Timestamp(cal.getTimeInMillis()), new Double("1.44")));
  cal.set(Calendar.HOUR_OF_DAY, 3);
  cal.set(Calendar.MINUTE, 12);
  cal.set(Calendar.SECOND, 04);
  measures.add(new TriggerGraphicalData(new Timestamp(cal.getTimeInMillis()), new Double("1.69")));
  cal.set(Calendar.HOUR_OF_DAY, 5);
  cal.set(Calendar.MINUTE, 30);
  cal.set(Calendar.SECOND, 00);
  measures.add(new TriggerGraphicalData(new Timestamp(cal.getTimeInMillis()), new Double("1.803")));
  cal.set(Calendar.HOUR_OF_DAY, 9);
  cal.set(Calendar.MINUTE, 00);
  cal.set(Calendar.SECOND, 25);
  measures.add(new TriggerGraphicalData(new Timestamp(cal.getTimeInMillis()), new Double("1.829")));
  cal.set(Calendar.HOUR_OF_DAY, 9);
  cal.set(Calendar.MINUTE, 00);
  cal.set(Calendar.SECOND, 27);
  measures.add(new TriggerGraphicalData(new Timestamp(cal.getTimeInMillis()), new Double("1.729")));

  int seconds = 28;
  for (int i = 0; i < 30; i++, seconds++)
  {
    cal.set(Calendar.SECOND, seconds);
    measures.add(new TriggerGraphicalData(new Timestamp(cal.getTimeInMillis()),
      new Double("1.75")));
  }

  cal.set(Calendar.MINUTE, 1);
  seconds = 0;
  for (int i = 0; i < 60; i++, seconds++)
  {
    cal.set(Calendar.SECOND, seconds);
    measures.add(new TriggerGraphicalData(new Timestamp(cal.getTimeInMillis()),
      new Double("1.69")));
  }

  for (TriggerGraphicalData measure : measures)
  {
    // series.set(TimeUtil.getSecondInDayRelative(measure.getxValue(), minX),
    // measure.getyValue());
    series.set(measure.getxValue(), measure.getyValue());
  }

  maxX = new Timestamp(cal.getTimeInMillis());

  linearModel.addSeries(series);
}

XHTML页面：

<p:lineChart value="#{monitoringData.linearModel}" 
  style="height: 400px; width: 99%" legendPosition="ne" 
  zoom="true" animate="true" yaxisAngle="45" 
  seriesColors="3399FF, FF9900, 3399FF, FF9900, 3399FF, FF9900" 
  rendered="#{not empty monitoringData.measures}" extender="chartExtender">
  <f:convertDateTime pattern="dd-MM-yyyy HH:mm:ss" />
  <script type="text/javascript" src="#{request.contextPath}/js/jqplot.canvasAxisTickRenderer.js" />
  <script type="text/javascript" src="#{request.contextPath}/js/jqplot.categoryAxisRenderer.js" />
  <script type="text/javascript" src="#{request.contextPath}/js/jqplot.dateAxisRenderer.js" />
  <script type="text/javascript">
    function chartExtender() {
      console.log(this.cfg);
      var millis = this.cfg.categories;
      var minX = millis[0];
      var maxX = millis[millis.length - 1];
      console.log(minX);
      console.log(maxX);

      this.cfg.axes = {
        xaxis: {
          renderer: $.jqplot.DateAxisRenderer,
          min: minX,
          max: maxX,
          //autoscale: true,
          tickRenderer: $.jqplot.CanvasAxisTickRenderer,
          tickOptions: { 
            formatString: '%H:%M:%S', 
            tickInterval: '3600000',
            angle: 60
          }
        },
        yaxis: {
          renderer: $.jqplot.LinearAxisRenderer,
          tickRenderer:$.jqplot.CanvasAxisTickRenderer,
          tickOptions: {
            formatString: '%.4f',
            angle: 45
          }
        }
      }
      //this.cfg.axes.xaxis.ticks = this.cfg.categories;
    }
  </script>
</p:lineChart>

1）没有扩展器，绘图正确绘制，但x轴刻度相互重叠（这是一个例子，我可以有超过200点的图表）。

2）使用扩展器而不指定最小值/最大值，绘图正确绘制，但x轴上的刻度线消失（x轴的开头和末尾只有两个相同的值）。

3）与情况2一样，加上最小/最大值（通过扩展程序中的javascript指定），刻度线被正确绘制（也可以缩放），但没有绘图渲染。

4）与案例3类似，在“this.cfg.axes.xaxis.ticks = this.cfg.categories”行中取消注释，它会打破x轴刻度并且不会渲染绘图。

提前致谢。