Вопрос:

p: диаграмма с осью DateTime

primefaces charts jqplot

10004 просмотра

1 ответ

1298 Репутация автора

Я пытаюсь создать линейный график, используя компонент <p:chart>Primefaces 5.1.

И мне нужно, чтобы ось X отображала время. Что-то вроде этого:

введите описание изображения здесь

Но только против документации старой версии.

Я нашел несколько вещей, таких как:

Но в версии 5.1 нет такого тега <p:lineChart>и даже не атрибута extender="".

Я создал свою диаграмму на основе витрины:

Но этот пример не сильно помогает, потому что он работает только с датой. И чтобы усложнить это как String. Мне нужны часы.

Интересно, кто-то уже создал нечто подобное в более новых версиях Primefaces.

РЕДАКТИРОВАТЬ:

Ища немного больше, я нашел эту тему:

Я использовал упомянутый пример, и я мог бы заставить его работать.

Что я мог видеть, когда это DateAxis требуется установить axis.setMax(). В конце выглядело так:

введите описание изображения здесь

Это сработало так, как мне нужно, но двух вещей я не понял:

Первое: причина, по которой необходимо установить axis.setMax().

Второе: для чего используется этот шаблон axis.setTickFormat("%H:%#M:%S")?

Автор: Douglas Nassif Roma Junior Источник Размещён: 10.02.2015 03:43

Ответы (1)


12 плюса

1298 Репутация автора

Решение

Хорошо, теперь я думаю, что нашел приемлемое решение.

Первоначальная проблема с графиком была axis.setMax().

И шаблон, используемый в axis.setTickFormat:

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

Модель:

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);
}

И график:

<p:chart type="line" model="#{controller.dateModel}" />
Автор: Douglas Nassif Roma Junior Размещён: 10.02.2015 04:27
Вопросы из категории :
32x32