Question

我正在使用名为flot的jquery插件在我的spring mvc web应用程序中为我创建一些图形。

我可以在http://www.flotcharts.org/flot/examples/ajax/找到我使用json数据从ajax调用加载flot图的示例。{/ p>

此示例显示图表中加载的json数据采用此格式...

    {
        "label": "Japan",
        "data": [[1999, -0.1], [2000, 2.9], [2001, 0.2], [2002, 0.3], [2003, 1.4], [2004, 2.7], [2005, 1.9], [2006, 2.0], [2007, 2.3], [2008, -0.7]]
    }

现在转到我的数据，我已经有了一个json控制器，它可以在图表中提供我想要的数据，但它的格式不同......

[
    {
        "businessDate": "2015-02-10",
        "thisYear": 20067,
        "lastYear": 19252
    },
    {
        "businessDate": "2015-02-11",
        "thisYear": 21733,
        "lastYear": 19365
    },
    {
        "businessDate": "2015-02-12",
        "thisYear": 28192,
        "lastYear": 21982
    }
]

我的问题是如何让flot读取这种类型的json数据结构？请参阅下文，了解我希望在图表中显示的内容。

或者，如果不可能，我怎样才能将json返回到从ajax调用中获取json之后返回的内容（使用jquery）....

{
    "label": "ThisYear",
    "data": [[2015-02-10, 20067], [2015-02-11, 21733], [2015-02-12, 28192]]
}

{
    "label": "LastYear",
    "data": [[2014-02-10, 19252], [2014-02-11, 19365], [2014-02-12, 21982]]
}

感谢

Answer 1

如果从后端返回以下json，日期格式会让您头疼。您必须以时间戳发送日期，这对于jquery flot来说很简单。请注意，UNIX TIMESTAMP以秒为单位，必须乘以1000才能匹配以毫秒为单位的JavaScript时间戳：

{
    "label": "LastYear",
    "data": [[2014-02-10, 19252], [2014-02-11, 19365], [2014-02-12, 21982]]
}

返回此选项，jquery flot将呈现平滑：

{
    "label": "LastYear",
    "data": [[1392008400000, 19252], [1392094800000, 19365], [1392181200000, 21982]]
}

jquery flot chart ajax source / json数据转换

1 个答案: