p:chart 缩放 date/time 轴什么都不显示

Question

我在使用 "date time" 轴设置图表缩放时遇到问题。我做了一个模拟，将 Primefaces 的图表与本机 jqplot 进行了比较。 jqplot native works fine, but with primefaces 不是。

在我看来，这似乎是视口计算中的一个错误。

我的 JSF 页面：

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

我的托管 bean：

@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

Primefaces：5.3
Java 效率：7.0
玻璃鱼：4.1.1

我前几天正在研究。我究竟做错了什么？这是一个限制？

# 2016-08-03 更新：

与 Primefaces 6.0 相同的问题

# 2016-09-01 更新：

基于 @lalitha ramakrishnan 我让它工作只是在 xhtml 页面中包含 jqplot.dateAxisRenderer.min.js 文件。对于某些错误，Primefaces 不会自动包含它。

但现在总是smooth=true。我尝试通过 lineSeries.setSmoothLine(false) 和 extender 配置，但没有成功。

错误报告：https://github.com/primefaces/primefaces/issues/1736

Answer 1

您可以在 javascript.

中将 primefaces 图表模型的 xaxis 渲染器指定为 $.jqplot.DateAxisRenderer

当模型的扩展器属性设置为 "ext" 时，将调用以下脚本。

model.setExtender("ext");

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

另请参阅

编辑： 您需要在 xhtml 页面中包含 jqplot.dateAxisRenderer.min.js 文件。

p:chart 缩放 date/time 轴什么都不显示

p:chart zoom with date/time axis shows nothing

jsf

primefaces

charts

jqplot