c# - 如何首先使用通过代码创建的数据库中的数据填充Google图表-ASP.Net MVC

我想用我用代码优先方法创建的数据库中的数据替换下面代码中的硬编码数据。
但是，我真的不知道怎么做，因为我对这个还很陌生。google图表可以完美地处理硬编码值，但是如何使用数据库中的实际数据来处理它是我理解的终点。有很多关于如何使用硬编码数据的教程（关于代码优先），但是没有关于使用数据库中的数据的教程。
有人能给我提供一个详细的方法如何做到这一点，以便我能更好地理解它吗？我将非常感谢，并提前感谢！
如果有任何额外的信息需要，请让我知道，我会尽量添加到问题。
模型

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace HealthHabitat.Models
{
    public class ProductModel
    {
        public string YearTitle { get; set; }
        public string SaleTitle { get; set; }
        public string PurchaseTitle { get; set; }
        public Product ProductData { get; set; }
    }
    public class Product
    {
        public string Year { get; set; }
        public string Purchase { get; set; }
        public string Sale { get; set; }
    }
}

控制器：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using HealthHabitat.Models;

namespace HealthHabitat.Controllers
{
    public class ChartController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            ProductModel objProductModel = new ProductModel();
            objProductModel.ProductData = new Product();
            objProductModel.ProductData = GetChartData();
            objProductModel.YearTitle = "Year";
            objProductModel.SaleTitle = "Sale";
            objProductModel.PurchaseTitle = "Purchase";
            return View(objProductModel);

        }
        /// <summary>
        /// Code to get the data which we will pass to chart
        /// </summary>
        /// <returns></returns>
        public Product GetChartData()
        {
            Product objproduct = new Product();
            /*Get the data from databse and prepare the chart record data in string form.*/
            objproduct.Year = "2009,2010,2011,2012,2013,2014";
            objproduct.Sale = "2000,1000,3000,1500,2300,500";
            objproduct.Purchase = "2100,1400,2900,2400,2300,1500";
            return objproduct;
        }
    }
}

意见

 @model HealthHabitat.Models.ProductModel

<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 drawChart() {
        // Create and populate the data table.
        var years = [@Model.ProductData.Year];
        var sales = [@Model.ProductData.Sale];
        var Purchase = [@Model.ProductData.Purchase];

        var data = new google.visualization.DataTable();
        data.addColumn('string', '@Model.YearTitle');
        data.addColumn('number', '@Model.SaleTitle');
        data.addColumn('number', '@Model.PurchaseTitle');
        for (i = 0; i < years.length; i++) {
            data.addRow([years[i].toString(), sales[i], Purchase[i]]);
        }
        var options = {
            title: 'Sale and Purchase Compare',
            hAxis: { title: '@Model.YearTitle', titleTextStyle: { color: 'red'} }
        };

        var chart = newgoogle.visualization.ColumnChart(document.getElementById('chartdiv'));
        chart.draw(data, options);
    }
</script>
<div id="chartdiv" style="width: 500px; height: 300px;">
</div>

最佳答案

虽然您可以轻松地从实体生成字符串，但我将使用ajax和json作为替代。
想象你有这样的实体模型：

public class Product
{
    public int ID {get; set; }
    public int Year { get; set; }
    public int Purchase { get; set; }
    public int Sale { get; set; }
}

在你的DbContext中是这样的：

public class Mycontext:DbContext
{
    public IDbSet<Product> Products { get; set; }
    // other sets
}

现在在action方法中，您可以删除GetChartData()，因为我们将从ajax调用中获取图表数据。

public ActionResult Index()
{
    ProductModel objProductModel = new ProductModel();
    objProductModel.YearTitle = "Year";
    objProductModel.SaleTitle = "Sale";
    objProductModel.PurchaseTitle = "Purchase";
    return View(objProductModel);
}

添加新的操作方法以获取ajax调用的数据：

// in real world you may add some parameters to filter your data
public ActionResult GetChart()
{
    return Json(_myDB.Products
        // you may add some query to your entitles
        //.Where()
        .Select(p=>new{p.Year.ToString(),p.Purchase,p.Sale}),
            JsonRequestBehavior.AllowGet);
}

现在您的视图可能是这样的：

<script type="text/javascript">

  // 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);

  function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', '@Model.YearTitle');
      data.addColumn('number', '@Model.SaleTitle');
      data.addColumn('number', '@Model.PurchaseTitle');

      // don't forget to add JQuery in your view.
      $.getJSON("@Url.Action("GetChart")", null, function (chartData) {
          $.each(chartData, function (i, item) {
              data.addRow([item.Year, item.Sale, item.Purchase]);
          });

          var options = {
              title: 'Sale and Purchase Compare',
              hAxis: { title: '@Model.YearTitle', titleTextStyle: { color: 'red' } }
          };

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