使用谷歌图表API与MVC 3剃须刀和jQuery的AJAX

Question

我想显示在我的网站使用Google图表API到目前为止我不能得到它的工作，我找不到任何示例使用MVC 3 剃刀。

这里是使用JSON获取数据

// Load the Visualization API and the piechart package. 
    google.load('visualization', '1.0', { 'packages': ['corechart'] }); 

    // Set a callback to run when the Google Visualization API is loaded. 
    google.setOnLoadCallback(drawChart); 

    JSON.stringify = JSON.stringify || function (obj) { 
     var t = typeof (obj); 
     if (t != "object" || obj === null) { 
      // simple data type 
      if (t == "string") obj = '"' + obj + '"'; 
      return String(obj); 
     } 
     else { 
      // recurse array or object 
      var n, v, json = [], arr = (obj && obj.constructor == Array); 
      for (n in obj) { 
       v = obj[n]; t = typeof (v); 
       if (t == "string") v = '"' + v + '"'; 
       else if (t == "object" && v !== null) v = JSON.stringify(v); 
       json.push((arr ? "" : '"' + n + '":') + String(v)); 
      } 
      return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}"); 
     } 
    }; 
    // Callback that creates and populates a data table, 
    // instantiates the pie chart, passes in the data and 
    // draws it. 
    function drawChart() { 

     // Create the data table. 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Topping'); 
     data.addColumn('number', 'Slices'); 
     $.post('@Url.Content("~/Home/GetMyChart1")', 
      function (items) { 
       // Successful requests get here 
       alert(JSON.stringify(items) + " - " + items.rows.length); 
       data.addRows(items.rows.length); 
       $.each(items.rows, function (i, item) { 
        alert(i); 
        data.setCell(i, 0, item.Name); 
        data.setCell(i, 1, item.ID); 
       }); 
       alert("finished"); 
       alert(data.length); 
      }); 
     // Set chart options 
     var options = { 'title': 'How Much Pizza I Ate Last Night', 
      'width': 400, 
      'height': 300 
     }; 

     // Instantiate and draw our chart, passing in some options. 
     var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
    } 

控制器代码

public ActionResult GetMyChart1(string CurrentClass) 
    { 
     var tests = from t in db.Tests 
        group t by new { t.StudentID, t.Student.CurrentSchoolGrade } into tl 
        select new { StudentID = tl.Key.StudentID, Class = tl.Key.CurrentSchoolGrade, Score = (tl.Sum(k => k.Score)/tl.Sum(l => l.Part.Score))* 100, Count = tl.Count() }; 
     var results = from t in tests 
         where t.Class == CurrentClass 
         select t; 
     List<DataItem> dt = new List<DataItem>(); 
     dt.Add(new DataItem(results.Count(x => x.Score <= 40), "0% - 40%")); 
     dt.Add(new DataItem(results.Count(x => x.Score <= 60 && x.Score > 40), "40% - 60%")); 
     dt.Add(new DataItem(results.Count(x => x.Score <= 80 && x.Score > 60), "60% - 80%")); 
     dt.Add(new DataItem(results.Count(x => x.Score <= 100 && x.Score > 60), "80% - 100%")); 

     chartJson cj = new chartJson(); 
     cj.rows = dt; 

     return Json(cj); 
    } 
public class chartJson 
    { 
     public List<DataItem> rows { get; set; } 
    } 
public class DataItem 
{ 
    public DataItem(int id, string name) 
    { 
     ID = id; 
     Name = name; 
    } 
    public int ID { get; set; } 
    public string Name { get; set; } 
} 

所有警报返回除了警报（data.length）正确的价值观我的代码即时通讯;它会返回undefined ，并且绘图div会显示一个写入标签。无数据

Answer 1

我在想，你需要的图表绘制线移动POST回调的内部：

$.post('@Url.Content("~/Home/GetMyChart1")', function (items) { 
    // Successful requests get here     
    alert(JSON.stringify(items) + " - " + items.rows.length);     
    data.addRows(items.rows.length);     
    $.each(items.rows, function (i, item) { 
     alert(i);      
     data.setCell(i, 0, item.Name);      
     data.setCell(i, 1, item.ID);     
    });     
    alert("finished");     
    alert(data.length);    
    // Set chart options   
    var options = { 
     'title': 'How Much Pizza I Ate Last Night',    
     'width': 400,    
     'height': 300   
     // Instantiate and draw our chart, passing in some options.   
     var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
    });   
};   

Answer 2

Google图表API是使用JavaScript编写的，因此它可以用于任何Web框架，包括ASP.NET MVC。所有你需要做的就是将它包含在你的观点中。它不应该被限制或不能工作，因为你正在使用ASP.NET MVC。

Answer 3

查看完整的代码示例后，看起来google.setOnLoadCallback(drawChart);最有可能在data准备好之前执行drawChart方法。因此没有图表。

而不是制作一个Ajax .Post到服务器检索数据，只是建立你的数据在初始请求。