ASP.NET MVC JsonResult和JQuery flot

Question

我正在尝试在asp.net mvc中使用jquery flot图表插件。 我正在尝试动态地从JsonResult中提取数据以便填充图表。

我的问题是，我似乎无法以正确的格式从JsonResult返回数据。

以下是我的服务器端代码:

public ActionResult JsonValues()
{
    IList<IDictionary<string, int>> listofvalues = new List<IDictionary<string, int>>();
    IDictionary<string, int> values1 = new Dictionary<string, int>();
    values1.Add("2003", 10882);
    values1.Add("2002", 10383);
    values1.Add("2001", 10020);
    values1.Add("2000", 9762);
    values1.Add("1999", 9213);
    values1.Add("1998", 8720);

    IDictionary<string, int> values3 = new Dictionary<string, int>();
    values3.Add("2003", 599);
    values3.Add("2002", 510);
    values3.Add("2001", 479);
    values3.Add("2000", 457);
    values3.Add("1999", 447);
    values3.Add("1998", 414);

    listofvalues.Add(values1);
    listofvalues.Add(values3);

    JsonResult result = new JsonResult { Data = listofvalues };
    return result;
}

这是我的客户端代码：

$(function() {
    $.getJSON("/path/to/JsonValues", function(data) {
        var plotarea = $("#plot_area");
        $.plot(plotarea, data);
    });
});

注意，以下客户端代码运行正常：

$(function() {
    var points = [
        [[2003, 10882],
        [2002, 10383],
        [2001, 10020],
        [2000, 9762],
        [1999, 9213],
        [1998, 8720]],

        [[2003, 599],
        [2002, 510],
        [2001, 479],
        [2000, 457],
        [1999, 447],
        [1998, 414]]
    ];

    var plotarea = $("#plot_area");
    $.plot(plotarea, points);
});

考虑到上述内容正确，似乎只是正确格式化返回的JsonResult的问题。我该怎么做？列表字典是否最好返回的类型，还是应该使用其他东西？或者在javascript中有一个函数可以正确格式化数据吗？

看起来很简单，但我还没有完全搞定。

- dp.

Answer 1

请检查返回给客户端的Json，它将是带有键值对的Json对象，类似于：

{{'2003':10882,'2002':10383},....}

如果您需要一个数组的数组，请使用以下方法。

[[[2003, 10882],[2002, 10383]],...]

您可以自己生成Json字符串并返回结果。

StringBuilder sb = new StringBuilder();
sb.append("[2003,10882],")
return Json("[" + sb.ToString() + "]");

或者您可以尝试将值存储在数组中，这可能会生成所需的Json，但我没有尝试过。

- David Glenn

---

我最初在我的程序中使用了这个答案，但我发现下面有一个不同的解决方案（在我看来更好）：https://dev59.com/AEnSa4cB1Zd3GeqPLitr#19114827 - Thomas

Answer 2

如果您想使用C#数组完成此操作，可以按照以下步骤进行操作：

var values = new object[] {
    new object[] /* First series of value */
    {
        new int[,] { {2003,10882} },
        new int[,] { {2002,10383} }
    }
};

然后

return Json(values);

- bounav

---

时尚解决方案... 对我很有效。谢谢。 - Gabriel Simas

Answer 3

您需要一个形式为JSON数组的数据，格式如下：

[[1, 1], [2, 3], [5, 5]]

flot分类插件期望以以下形式输入数据：

[["category1", 12], ["category2", 3]]

在C#中，这并不是一件容易的事情（我花了很长时间才找到解决方法：-））

关键是要创建对象数组（object []）

以下是未经测试的代码:

IEnumerable<object[]> values1_array = from x in values1 
select new object [] {x.Key, x.Value};

IEnumerable<object[]> values3_array = from x in values3 
select new object [] {x.Key, x.Value};

//create one big object
var dataArray = new object[] {
    new {data = values1_array, label="Values1"},
    new {data = values3_array, label="Values3"},
};

//return Json data
return Json(dataArray) /* JsonRequestBehavior.AllowGet ?*/

你的JavaScript代码应该正常运行:

$(function() {
    $.getJSON("/path/to/JsonValues", function(data) {
        var plotarea = $("#plot_area");
        $.plot(plotarea, data);
    });
});

- Thomas