C# MVC动态数据谷歌图表

我现在正在与动态数据、C#MVC和谷歌图表作斗争。 我试图实现的是读取一个数据库文件，并为每个组创建一个谷歌图表

我看到了这样一个示例，但不知道如何处理控制器文件中的动态数据

控制器：

namespace AppRepo.Controllers
{
    public class RepositoriesController : Controller
    {
        private Database1Entities db = new Database1Entities();

        // GET: Repositories
        public ActionResult Index()
        {

            return View(db.Repositories.ToList());

        }

        public ActionResult Grouped()
        {
            return View(db.Repositories.ToList());

        }

        public ActionResult Charts()
        {
            return View(db.Repositories.ToList());


        }
}

查看文件：

@model List<AppRepo.Models.Repository>

@{
    ViewBag.Title = "Charts";
}

@section Scripts
{
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript">
        google.load('visualization', '1', { packages: ['corechart'] });
    </script>

    <script type="text/javascript">
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var tdata = new google.visualization.DataTable();
            var data = [{ "Name": "A", "Qty": 1 }, { "Name": "B", "Qty": 2 }, { "Name": "C", "Qty": 3 }, { "Name": "D", "Qty": 4 }];

            tdata.addColumn('string', 'Name');
            tdata.addColumn('number', 'Qty');

            for (var i = 0; i < data.length; i++) {
                tdata.addRow([data[i].Name, data[i].Qty]);
            }
            var options = {
                width: 1000,
                height: 563,
                //title: '@Model.Select(r => r.BackupServer)',
                hAxis: {
                    title: 'Date',
                    gridlines: { count: 10 }
                },
                vAxis: {
                    title: '% Free'
                }
            };




            chart = new google.visualization.ColumnChart(document.getElementById('divchart'));

            chart.draw(tdata,options);
        }

    </script>
}
<div id='divchart'>
</div>

@型号列表
@{
ViewBag.Title=“图表”；
}
@节脚本
{
load（'visualization'，'1'，{packages:['corechart']}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var tdata=new google.visualization.DataTable（）；
变量数据=[{“名称”：“A”，“数量”：1}，{“名称”：“B”，“数量”：2}，{“名称”：“C”，“数量”：3}，{“名称”：“D”，“数量”：4}]；
tdata.addColumn（'string'，'Name'）；
tdata.addColumn（'编号'，'数量'）；
对于（变量i=0；ir.BackupServer）”，
哈克斯：{
标题：“日期”，
网格线：{count:10}
},
言辞：{
标题：'%Free'
}
};
chart=新的google.visualization.ColumnChart（document.getElementById（'divchart'）；
图表绘制（tdata、选项）；
}
}

我现在还收到以下错误：

传递到字典中的模型项的类型为“System.Collections.Generic.List`1[AppRepo.Models.Repository]”，但此字典需要类型为“AppRepo.Models.Repository”的模型项

---

您的问题是视图的模型是

AppRepo.Models.Repository

，但您正在向其中传递

AppRepo.Models.Repository

对象的

列表

如果将视图的模型更新为
List
，则收到的错误应消失。但是，您需要在视图文件中查看并更新对模型的引用，因为像
@Html.Raw（model.FreePct）
这样的东西将不再起作用。这将非常容易，但是，如果您想要
存储库
对象的
列表
中的所有
FreePct
值，您可以执行类似于
@Model的操作。选择（r=>r.FreePct）

更新问题后的更新答案：

这是我用来绘制图表的一般格式。它使用了一些jQuery，但对我来说工作可靠。此外，通过分离图表的加载和绘制，您可以在需要时只加载数据，从而使页面更具响应性，然后您可以在不重新加载的情况下重新绘制所需的数据

请注意，当我使用
图表
、
数据
和
选项
时，我不会将它们放在
变量
的前面，因为我想使用这些变量的全局实例

更新：我认为这应该正确使用您的模型数据。注意，在for循环中，方法是
tdata.addRows
，而不是
tdata.addRow

<div id='divchart'>
</div>

@section Scripts
{
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript">
        google.load('visualization', '1', { packages: ['corechart'] });
    </script>

    <script type="text/javascript">

        var chart;
        var options;
        var data;

        $(document).ready(function () {
            LoadChartData();
            DrawChart();
        });

        function LoadChartData() {
            var tdata = new google.visualization.DataTable();
            tdata.addColumn('date', "Date");
            tdata.addColumn('number', "FreePct");

            @for (int i = 0; i < Model.Count; i++) 
            {
                @: tdata.addRows([@Model.ElementAt(i).Date, @Model.ElementAt(i).FreePct]);
            }

            options = {
                width: 1000,
                height: 563,
                title: '@Model.Select(r => r.BackupServer).FirstOrDefault()',
                hAxis: {
                    title: 'Date',
                    gridlines: { count: 10 }
                },
                vAxis: {
                    title: '% Free'
                }
            };

            var chartContainer = document.getElementById("divchart");

            while (chartContainer == null) {
                chartContainer = document.getElementById("divchart");
            }

            chart = new google.visualization.ColumnChart(chartContainer);
        }

        function DrawChart() {

            chart.draw(data, options);
        }

    </script>
}


@节脚本
{
load（'visualization'，'1'，{packages:['corechart']}）；
var图；
var期权；
var数据；
$（文档）.ready（函数（）{
LoadChartData（）；
图纸（）；
});
函数LoadChartData（）{
var tdata=new google.visualization.DataTable（）；
tdata.addColumn（“日期”，“日期”）；
tdata.addColumn（'number'，'FreePct'）；
@for（int i=0；ir.BackupServer.FirstOrDefault（）”，
哈克斯：{
标题：“日期”，
网格线：{count:10}
},
言辞：{
标题：'%Free'
}
};
var chartContainer=document.getElementById（“divchart”）；
while（chartContainer==null）{
chartContainer=document.getElementById（“divchart”）；
}
chart=新的google.visualization.ColumnChart（chartContainer）；
}
函数绘图图（）{
图表绘制（数据、选项）；
}
}
i]无法通过这种方式识别。哦，是的，我看到了错误。给我一分钟来解决这个问题。我使用了这里的第二个答案：我的答案现在更新了。仍然不起作用。认为代码是正确的，但数据不是，这就是图表不存在的方式。我已经取消了选项中标题的注释。标题是：System.Linq.Enumerable+WhereSelectListIterator`2[AppRepo.Models.Repository，System.String]如果模型是存储库列表，则选择不适用于标题。标题应为字符串，而Select将返回字符串列表。所以，也许你会想在某个时候在其中添加一个FirstOrDefault。用它替换Select，或将其放在Select之后。