Primefaces LineChartModel：在 Y 轴上放置日期

Question

我正在使用 JSF2 和 PrimeFaces 5.1。

我的问题是我不知道如何将日期放在图表的 Y 轴上。它只接受数字类型。

/**
 * Graph's definition
 * @return LineChartModel
 * @throws ParseException
 */
public LineChartModel createLineModels() throws ParseException {
    LineChartModel lineChartModel = new LineChartModel();
    lineChartModel = initCategoryModel();
    lineChartModel.setTitle("Graph's title");
    lineChartModel.setLegendPosition("nw");
    lineChartModel.getAxes().put(AxisType.X, new CategoryAxis("PV"));

    Axis yAxis = this.lineChartModel.getAxis(AxisType.Y);
    yAxis.setTickInterval("1");
    yAxis.setLabel("Provisional dates");
    return lineChartModel;
}

/**
 * Initialization of the graph
 * @return LineChartModel
 * @throws ParseException
 */
public LineChartModel initCategoryModel() throws ParseException {

    LineChartModel model = new LineChartModel();

    ChartSeries provisionalDates= new ChartSeries();
    provisionalDates.setLabel("Dates");

    //Here, I set my data in the Graph
    //In x-axis the date and the y-axis a numerical value
    provisionalDates.set("2016-01-01", 5);
    provisionalDates.set("2016-01-15", 8);

    model.addSeries(provisionalDates);

    return model;
}

我的问题是这些行：

provisionalDates.set("2016-01-01", 5);
provisionalDates.set("2016-01-15", 8);

方法集只接受数值。我想要约会。

你知道我可以把我的日期放在 Y 轴上的方法吗？

谢谢

Answer 1

我终于用 jqPlot 找到了答案。

方法集只接受一个数值，所以我所做的是以毫秒为单位转换我的日期。

long dateMS= myDate.getTime();
provisionalDates.set("2016-01-15", dateMS);

然后，您可以使用 PF 向您的图表添加扩展器。扩展器允许您配置图表：

model.setExtender("extender"); //Works with PF 5+

之后，你只需要制作扩展函数：

function extender() {
    this.cfg.axes.yaxis.tickOptions = {
        formatter: function (format, value) {
            return $.jqplot.sprintf(convertDate(value));
        }
    };
}

convertDate 函数仅将 getTime 转换为 dd/mm/yyyy。

function convertDate(ms) {
    var dateReadable = new Date(ms);
    var year = dateReadable.getFullYear();
    var month = dateReadable.getMonth() + 1;
    if (month < 10) {
        month = "0" + month;
    }
    var day = dateReadable.getDate();
    if (day < 10) {
        day = "0" + day;
    }
    return day + "/" + month + "/" + year;
}

Primefaces LineChartModel：在 Y 轴上放置日期

Primefaces LineChartModel: put date in Y axis

primefaces

jsf-2

jqplot