p:graphique avec DateTime axe

Je suis en train de créer une ligne graphique à l'aide du composant <p:chart> de la Primefaces 5.1.

Et j'ai besoin de l'axe X affiche l'heure. Quelque chose comme ceci:

p:graphique avec DateTime axe

Mais uniquement à l'égard de la documentation de l'ancienne version.

J'ai trouvé plusieurs choses comme:

Mais dans la version 5.1 il n'y a pas une telle balise <p:lineChart>, et même pas l'attribut extender="".

J'ai créé mon tableau basé sur la vitrine:

Mais cet exemple n'aide pas beaucoup, parce que c'est seulement en travaillant avec date. Et pour compliquer les sont comme une Chaîne de caractères. J'ai besoin de le heures.

Je me demande si quelqu'un a déjà créé quelque chose de semblable dans les versions plus récentes de Primefaces.

EDIT:

Cherchant un peu plus, j'ai trouvé ce sujet:

J'ai utilisé l'exemple mentionné, et j'ai pu le faire fonctionner.

Ce que j'ai pu voir, quand c'est un DateAxis est nécessaire pour définir la axis.setMax(). À la fin ressemblait à ceci:

p:graphique avec DateTime axe

Cela a fonctionné comme je le voulais, mais deux choses que je ne comprenais pas:

Première: La raison d'être nécessaire pour définir la axis.setMax().

Deuxième: qu'est-Ce que ce motif est utilisé dans axis.setTickFormat("%H:%#M:%S")?

InformationsquelleAutor Douglas Nassif Roma Junior | 2015-02-10
  1. 12

    Ok, je pense que maintenant j'ai trouvé une solution acceptable.

    Le problème initial avec le diagramme a été axis.setMax().

    Et le motif est utilisé dans le axis.setTickFormat est: 

    Code    Result                  Description
            == Years ==
%Y      2008                Four-digit year
%y      08                  Two-digit year
            == Months ==
%m      09                  Two-digit month
%#m     9                   One or two-digit month
%B      September           Full month name
%b      Sep                 Abbreviated month name
            == Days ==
%d      05                  Two-digit day of month
%#d     5                   One or two-digit day of month
%e      5                   One or two-digit day of month
%A      Sunday              Full name of the day of the week
%a      Sun                 Abbreviated name of the day of the week
%w      0                   Number of the day of the week (0 = Sunday, 6 = Saturday)
%o      th                  The ordinal suffix string following the day of the month
            == Hours ==
%H      23                  Hours in 24-hour format (two digits)
%#H     3                   Hours in 24-hour integer format (one or two digits)
%I      11                  Hours in 12-hour format (two digits)
%#I     3                   Hours in 12-hour integer format (one or two digits)
%p      PM                  AM or PM
            == Minutes ==
%M      09                  Minutes (two digits)
%#M     9                   Minutes (one or two digits)
            == Seconds ==
%S      02                  Seconds (two digits)
%#S     2                   Seconds (one or two digits)
%s      1206567625723       Unix timestamp (Seconds past 1970-01-01 00:00:00)
            == Milliseconds ==
%N      008                 Milliseconds (three digits)
%#N     8                   Milliseconds (one to three digits)
            == Timezone ==
%O      360                 difference in minutes between local time and GMT
%Z      Mountain Standard Time  Name of timezone as reported by browser
%G      -06:00              Hours and minutes between GMT
            == Shortcuts ==
%F      2008-03-26          %Y-%m-%d
%T      05:06:30            %H:%M:%S
%X      05:06:30            %H:%M:%S
%x      03/26/08            %m/%d/%y
%D      03/26/08            %m/%d/%y
%#c     Wed Mar 26 15:31:00 2008  %a %b %e %H:%M:%S %Y
%v      3-Sep-2008          %e-%b-%Y
%R      15:31               %H:%M
%r      3:31:00 PM          %I:%M:%S %p
            == Characters ==
%n      \n                  Newline
%t      \t                  Tab
%%      %                   Percent Symbol

    Le modèle:

    private void createDateModel() {
    dateModel = new LineChartModel();
    LineChartSeries series1 = new LineChartSeries();
    series1.setLabel("Series 1");
    series1.set("2014-01-01 00:10:50", 51);
    series1.set("2014-01-01 00:10:51", 22);
    series1.set("2014-01-01 00:10:52", 65);
    series1.set("2014-01-01 00:10:53", 35);
    dateModel.addSeries(series1);
    dateModel.getAxis(AxisType.Y).setLabel("Values");
    DateAxis axis = new DateAxis("Dates");
    axis.setTickAngle(-50);
    axis.setMax("2014-01-01 00:10:56");
    axis.setTickFormat("%H:%#M:%S");
    dateModel.getAxes().put(AxisType.X, axis);
}

    Et le graphique:

    <p:chart type="line" model="#{controller.dateModel}" />
    InformationsquelleAutor Douglas Nassif Roma Junior