2009-09-02 4 views
5

Próbuję użyć wtyczki graficznej jquery flot z asp.net mvc. Próbuję dynamicznie pobierać dane z JsonResult w celu wypełnienia wykresu.ASP.NET MVC JsonResult i JQuery flot

Moim problemem jest to, że nie mogę uzyskać danych zwróconych z JsonResult we właściwym formacie.

Oto mój serwer kodu po stronie:

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

I tu jest mój kod po stronie klienta:

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

Uwaga, poniższy kod po stronie klienta działa bez zarzutu:

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

Biorąc pod uwagę, że powyższe działa poprawnie, wydaje się, że jest to tylko kwestia prawidłowego sformatowania zwróconego JsonResult. Jak mogę to zrobić? Czy lista słowników jest najlepszym typem do powrotu, czy powinienem używać czegoś innego? Czy istnieje funkcja javascript, które powinienem używać do prawidłowego formatowania danych?

Wydaje się, że to bardzo prosta rzecz, ale nie mogę jej uruchomić.

Odpowiedz

4

Sprawdź swoją Json zwracana do klienta, to będzie JSON obiekty z par wartości klucza, coś jak:

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

Gdzie jak wymagają tablicę tablic.

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

Zawsze możesz wygenerować ciąg JSON siebie i zwraca wynik

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

Albo można spróbować przechowywania wartości w macierze, które mogłyby generować żądaną JSON, ale nie próbowałem tego.

+0

raz pierwszy użyty t jego odpowiedź na mój program, ale znalazłem inne imho lepsze rozwiązanie poniżej: http://stackoverflow.com/a/19114827/605586 – Thomas

4

Jeśli chcesz zrobić to z C# tablice można wykonać następujące czynności:

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

A potem

return Json(values); 
+0

Rozwiązanie modowe ... Działa dla mnie. Dzięki –

4

Ty potrzebujesz tablicę JSON w postaci:

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

Wtyczka kategorii flot oczekuje danych w postaci:

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

To nie jest proste, aby utworzyć w C# (musiał szukać długi czas :-))

Kluczem do sukcesu jest stworzenie tablic przedmiot (object [])

Nietestowane Kod następująco:

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 kod powinien działać:

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