Question

我有一个LINQ查询，它获取Type和类型数，我在控制器中有它。在我看来，我正在使用谷歌图表中的饼图，我试图显示LINQ语句获取的数据。但是，当我运行程序时，饼图不会显示。但是没有出现错误。所以我很难看到我的问题是我的视图还是控制器

控制器：

public ActionResult Report_5()
{                
     return View();
}

public ActionResult GetChart5()
{
    var result = from x in db.Submission
                 group x by x.Type into grp
                 select new
                 {
                     Type = grp.Key,
                     Count = grp.Count()
                 };

    return Json(result, JsonRequestBehavior.AllowGet);
}

Report_5查看：

<h2 style="text-align:center">Type Count</h2>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>                   
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);

    function drawTable() {
        var data = new google.visualization.DataTable();

        data.addColumn('string', 'Type');
        data.addColumn('string', 'Count');

        $.getJSON("@Url.Action("GetChart5")", null, function (chartData) {
            $.each(chartData, function (i, item) {
                data.addRow([item.Type, item.Count]);
            });

            var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
            chart.draw(data, options);
        });
    }
</script>                    

<div id="donutchart" style="width: 900px; height: 500px;"></div>

如果我需要提供更多信息，请与我们联系。

Answer 1

我做了以下事情： 1.在文件夹模型中创建视图。

public class ModelSubmission
{
    public string  Type { get; set; }
    public int TotalSubmissions { get; set; }
}

在家庭控制器中创建了以下内容：

公共ActionResult Report_5（） { return View（）; }

public ActionResult GetChart5()
{
    List<ModelSubmission> result = new List<ModelSubmission>();
    result.Add(new ModelSubmission() { Type="Book", TotalSubmissions = 3 });
    result.Add(new ModelSubmission() { Type = "Book chapter", TotalSubmissions = 7 });
    result.Add(new ModelSubmission() { Type = "Journal Article", TotalSubmissions = 3 });

    return Json(result, JsonRequestBehavior.AllowGet);
}

然后复制/粘贴您的视图。然后执行调试，正如你提到的那样没什么特别的。在chrome中单击F12后，我注意到以下错误消息：

未捕获的ReferenceError：未定义drawChart。它引导我得出结论，在你的代码而不是

google.setOnLoadCallback(drawChart);

你应该写

google.setOnLoadCallback(drawTable);

经过一些调试后，我发现代码中存在其他错误。在观看以下视图时尝试找到它们：

 <h2 style="text-align:center">Type Count</h2>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">     </script>
 <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
 <script      src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js">     </script>
 <script      src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js">     </script>
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 <script type="text/javascript">
     google.load("visualization", "1", { packages: ["corechart"] });
     google.setOnLoadCallback(drawTable);

     function drawTable() {
         var data = new google.visualization.DataTable();

         data.addColumn('string', 'Type');
         data.addColumn('number', 'Count');

         $.getJSON("@Url.Action("GetChart5")", null, function (chartData) {
             $.each(chartData, function (i, item) {
                 data.addRow([item.Type, item.TotalSubmissions]);
        });

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        var options = {
            'title': 'Forgotten input',
            'width': 400,
            'height': 300
        };
        chart.draw(data, options);
    });
}

当来自其他网页的copy/paste代码

LINQ查询未在我的Google图表中显示mt数据（报告）

1 个答案: