ASP.NET MVC JsonResult und JQuery Flot

Question

Ich versuche, die jquery flot Grafik-Plugin mit asp.net mvc zu verwenden. Ich versuche, Daten dynamisch aus einem JsonResult zu ziehen, um den Graphen zu füllen.

Mein Problem ist, dass ich nicht scheinen kann, die Daten aus dem JsonResult im richtigen Format zurückgegeben.

Hier ist meine Server-Seite Code:

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

Und hier ist Code meine Client-Seite:

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

Hinweis, die folgende Client-Seite Code funktioniert gut:

$(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); 
    }); 

Vorausgesetzt, dass das obige korrekt funktioniert, scheint es, dass es nur darum geht, das zurückgegebene JsonResult korrekt zu formatieren. Wie kann ich das machen? Ist die Liste der Wörterbücher der beste Typ, der zurückgegeben werden soll, oder sollte ich etwas anderes verwenden? Oder gibt es eine Funktion in Javascript, die ich verwenden sollte, um die Daten korrekt zu formatieren?

Scheint wie eine wirklich einfache Sache, aber ich kann es nicht ganz funktionieren.

Answer 1

Überprüfen Sie Ihre Json an den Client zurückgegeben, wird es Json Objekte mit Schlüsselwert-Paare sein, so etwas wie:

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

Wo, wie Sie ein Array von Arrays erforderlich.

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

Sie können immer dem JSON-String selbst erzeugen und liefern das Ergebnis

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

Oder Sie könnten Ihre Werte in Arrays versuchen zu speichern, die die gewünschten Json erzeugen könnten, aber ich habe das nicht versucht.

Answer 2

Wenn Sie es mit C# Arrays tun wollen könnten Sie wie folgt vorgehen:

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

Und dann

return Json(values); 

Answer 3

Sie benötigen ein JSON-Array in der Form:

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

Das flot-Kategorie-Plugin erwartet Daten in der Form:

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

Dies ist nicht einfach in C# zu erstellen (hatte für eine lange Zeit :-) suchen)

Das Schlüsselobjekt Arrays (object [])

Ungeprüfte-Code folgt zu schaffen:

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 ?*/ 

Ihr JavaScript-Code einfach funktionieren soll:

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