jquery flot chart ajax源码/json数据转换答案

【问题标题】：jquery flot chart ajax source / json data transformationjquery flot chart ajax源码/json数据转换
【发布时间】：2015-02-17 10:49:13
【问题描述】：

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

我遵循的使用 json 数据从 ajax 调用加载浮点图的示例可以在这里找到http://www.flotcharts.org/flot/examples/ajax/。

这个例子说明图表中加载的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 数据结构？请参阅下文，了解我希望出现在图表中的内容。

或者，如果这是不可能的，在从 ajax 调用（使用 jquery）获取 json 后，我如何将返回的 json 转换为下面显示的内容......

{
    "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]]
}

谢谢

【问题讨论】：

两个选项；一，您修改您的控制器以生成格式为 flot 的 JSON 需要或二，在您收到 json 后，您编写 javascript 以将其放入 flot 需要的格式。此外，这个[2015-02-10, 20067] 是不是有效的javascript。您需要决定是否将这些日期作为实时或字符串类别来处理。
谢谢。这对我有帮助。不过我有点糊涂了。我已经考虑了很多谢谢你告诉我这是无效的javascript

标签： jquery json flot

【解决方案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]]
}

【讨论】：