Question

我现在正在努力研究动态数据，C＃MVC和Google Charts。我试图实现的是读取数据库文件并为每个组创建一个Google图表。

我看到了像http://www.aspdotnet-pools.com/2014/07/dynamic-google-scatter-chart-in-aspnet.html这样的示例，但在该示例中不知道如何处理控制器文件中的动态数据。

控制器：

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>

我现在也收到以下错误：

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

Answer 1

您的问题是，您的观看模型是AppRepo.Models.Repository，但您已将List AppRepo.Models.Repository个List<AppRepo.Models.Repository>对象传入其中。

如果您将视图模型更新为@Html.Raw(Model.FreePct)，则您收到的错误应该会消失。但是，您需要在视图文件中浏览并更新您对模型的引用，因为FreePct之类的内容不再有效。不过，如果您想要List个Repository个@Model.Select(r => r.FreePct)个对象中的所有chart值，那么这将非常简单。您可以执行data之类的操作。

更新后的问题更新后的答案：

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

请注意，当我使用options，var和tdata.addRows时，我没有在tdata.addRow前面添加它们，因为我想使用全局实例这些变量。

更新：我认为这应该正确使用您的模型数据。请注意，在for循环中，方法为<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> }，而不是{{1}}。

{{1}}

每个MVC动态数据谷歌图表

1 个答案: