如何使用首先通过代码创建的数据库填充谷歌图表 – ASP.Net MVC

我想用我使用Code First方法创建的数据库中的数据替换下面代码中的硬编码数据。

但是，我完全不知道是怎么回事，因为我还是很陌生。 Google Chart与硬编码值完美配合，但如何使用我数据库中的实际数据来处理它是我的理解结束的地方。 关于如何使用硬编码数据但没有使用数据库中的数据，有很多教程（在Code First上）。

有人可以请我详细介绍一下如何做到这一点，以便我能更好地理解它吗？ 我将非常感谢并提前感谢！

如果需要任何其他信息，请告诉我，我会尝试将其添加到问题中。

模型：

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); } /// 
 /// Code to get the data which we will pass to chart /// 
 ///  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   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); }  
  

Answer 1

虽然您可以轻松地从实体生成字符串，但我将使用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 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); } 

现在你的观点可能是这样的：

Answer 2

您可以尝试使用以下方式

  public Product GetChartData() { Product objproduct = new Product(); List yr = null; List sal = null; List pur = null; yr = db.tblCharts.Select(y => y.Years).ToList(); sal = db.tblCharts.Select(y => y.Sale).ToList(); pur = db.tblCharts.Select(y => y.Purchase).ToList(); objproduct.Year = string.Join(",", yr); objproduct.Sale = string.Join(",", sal); objproduct.Purchase = string.Join(",", pur); return objproduct; } 

我希望这能解决你的问题。