p: масштабирование диаграммы с осью даты/времени ничего не показывает

У меня проблема с установкой масштабирования на графике с осью "дата-время". Я сделал симуляцию, сравнивая график Primefaces с нативным jqplot. С jqplot нативное работает нормально, но с primefaces нет.

Мне кажется ошибка в расчете вьюпорта.

Образец Gif

Моя страница JSF:

<p:chart type="line" model="#{chartController.model}" id="chart" style="height: 400px" />

Мой управляемый компонент:

@Named(value = "chartController")
@ViewScoped
public class ChartController implements Serializable {

    private LineChartModel model;

    public ChartController() {
    }

    @PostConstruct
    public void init() {
        long[][] lines = {{1334856823000l, 2}, {1334856853000l, 1}, {1334856883000l, 0}, {1334856913000l, 4}, {1334856914000l, 13},
        {1334856943000l, 16}, {1334856973000l, 23}, {1334857003000l, 24}, {1334857033000l, 36}, {1334857063000l, 14}, {1334857093000l, 1}};

        model = new LineChartModel();
        model.setTitle("Primefaces Chart");
        model.setZoom(true);

        LineChartSeries series = new LineChartSeries();

        for (long[] line : lines) {
            series.set(line[0], line[1]);
        }

        DateAxis xaxis = new DateAxis();
        xaxis.setTickFormat("%e/%b %H:%M");
        xaxis.setTickAngle(-30);
        xaxis.setMin(1334856823000l); // if not set this, chart not work
        model.getAxes().put(AxisType.X, xaxis);

        Axis yaxis = new LinearAxis();
        yaxis.setMin(0);
        model.getAxes().put(AxisType.Y, yaxis);

        model.addSeries(series);
    }

    public LineChartModel getModel() {
        return model;
    }

}

Мой родной код jqplot:

<div id="chart" style="height: 400px"></div>

<script>

    $(document).ready(function () {
        $.jqplot.config.enablePlugins = true;

        var lines = [[1334856823000, 2], [1334856853000, 1], [1334856883000, 0], [1334856913000, 4], [1334856914000, 13],
            [1334856943000, 16], [1334856973000, 23], [1334857003000, 24], [1334857033000, 36], [1334857063000, 14], [1334857093000, 1]];

        $.jqplot('chart', [lines], {
            title: "Jqplot Native",
            axes: {
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                    tickOptions: {
                        formatString: '%e/%b %H:%M',
                        angle: -30
                    }
                },
                yaxis: {
                    renderer: $.jqplot.LinearAxisRenderer,
                    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                    min: 0
                }
            },
            cursor: {zoom: true}
        });

    });

</script>

Пример проекта: https://github.com/douglasjunior/PrimefacesChartZoomTest.

  • Простые лица: 5.3
  • JavaEE: 7.0
  • Стеклянная рыба: 4.1.1

Я исследую несколько дней назад. Что я делаю неправильно? Это ограничение?

# ОБНОВЛЕНИЕ 2016-08-03:

Та же проблема с Primefaces 6.0

# ОБНОВЛЕНИЕ 2016-09-01:

На основе @lalitha ramakrishnan ответа я заставляю его работать, просто включив файл jqplot.dateAxisRenderer.min.js в страницу xhtml. Из-за какой-то ошибки Primefaces не включает это автоматически.

Но теперь линий всегда было smooth=true. Пробовал настроить с помощью lineSeries.setSmoothLine(false) и с extender, но не получилось.

Отчет об ошибке: https://github.com/primefaces/primefaces/issues/1736


person Douglas Nassif Roma Junior    schedule 26.04.2016    source источник
comment
что делает $.jqplot.config.enablePlugins = true;? А если убрать? Работает ли он с другими типами диаграмм?   -  person Kukeltje    schedule 03.08.2016
comment
Это был просто тест. Плагины включены по умолчанию. Если я удалю эту строку, ничего не изменится. :(   -  person Douglas Nassif Roma Junior    schedule 03.08.2016
comment
Это работает в демонстрации PrimeFaces 6.0RC4 кстати... Так что странно, что вы заявляете, что это не работает для вас. Уверены, что используете тот же jqplot (например, не старый кешированный?)   -  person Kukeltje    schedule 01.09.2016
comment
Витрина — это не та ситуация. Я работаю с датой и временем. Только дата в формате гггг-мм-дд тоже хорошо работает.   -  person Douglas Nassif Roma Junior    schedule 01.09.2016
comment
Теперь вот мы наконец чего-то добились. Пожалуйста, отправьте сообщение об ошибке в список проблем github PrimeFaces с этими выводами. И вы пытались поместить туда строки даты и времени вместо миллисекунд с 1 января 1971 года?   -  person Kukeltje    schedule 01.09.2016
comment
Да, тип набора данных не меняет результат. Может быть строкой, длинной, датой и т. д. Я постараюсь сообщить об ошибке сейчас.   -  person Douglas Nassif Roma Junior    schedule 01.09.2016


Ответы (1)


Вы можете указать средство рендеринга xaxis вашей модели диаграммы Primefaces как $.jqplot.DateAxisRenderer в javascript.

Следующий сценарий будет вызываться, когда для свойства extension модели установлено значение «ext».

модель.setExtender("расширение");

function ext() { 
//this = chart widget instance 
//this.cfg = options
 this.cfg.axes = {
    xaxis : {
        renderer : $.jqplot.DateAxisRenderer,
        tickRenderer : $.jqplot.CanvasAxisTickRenderer,
        tickOptions : {
            formatString : "%b %#d, %H:%M:%S",
            angle : -30
        },
        drawMajorGridlines : false
    },
    yaxis : {
        // Other Options for Y Axis
    }
};
}

См. также

Как решить проблему с перекрытием оси xAxis?

EDIT: вам необходимо включить файл jqplot.dateAxisRenderer.min.js на вашу страницу xhtml.

person lalithark    schedule 01.09.2016
comment
Решит ли это проблему, описанную в вопросе? В этом случае хороший улов, но я ожидаю, что установка DateAxis xaxis = new DateAxis(); в java уже добавит dataAxisRenderer. Пожалуйста, проверьте! - person Kukeltje; 01.09.2016
comment
Какую версию ПФ вы используете? - person Kukeltje; 01.09.2016
comment
Я использую Праймфейс 6.0. Нам нужно подключить файл jqplot.dateAxisRenderer.min.js. Внутри расширителя мы можем настроить параметры осей x, y. - person lalithark; 01.09.2016
comment
И нет необходимости делать это между прочим. Это «просто работает» в витрине: primefaces.org/showcase/ui/chart /date.xhtml - person Kukeltje; 01.09.2016
comment
Если мы попытаемся увеличить диаграммы в витрине, мы можем заметить, что проблема с перекрытием по оси X. Добавление файла js решает проблему. - person lalithark; 01.09.2016
comment
Это не проблема в этом вопросе, и я не вижу перекрытия в ссылке на витрину, на которую я ссылался. Когда это происходит у вас? Или вы имеете в виду «дублированные» тики по оси X? - person Kukeltje; 01.09.2016
comment
Давайте продолжим обсуждение в чате. - person lalithark; 01.09.2016
comment
Я попробовал пример, упомянутый в вопросе. Добавление файла jqplot.dateAxisRenderer.min.js и расширителя действительно решило проблему, и график очень хорошо отреагировал на Zoom. Пусть ОП попробует решение и вернется. Спасибо. - person lalithark; 01.09.2016
comment
Спасибо @lalitha ramakrishnan, просто включив jqplot.dateAxisRenderer.min.js, зум работает нормально. Но теперь линий всегда было smooth=true. Пробовал настроить с помощью series.setSmoothLine(false); и с extender, но не получилось. Ps: Насчет витрины, в ней используется только date по оси, проблема в дате и времени. - person Douglas Nassif Roma Junior; 01.09.2016