Asp.net mvc 如何在MVC Razor中使用SQL Server数据库填充google图表

我希望用SQL Server数据库替换硬编码数据。 然而，我还是很迟钝，因为我还是个新手。。我刚刚试过谷歌图表，它使用的是硬编码的值，请指导我一步一步地将这些值更改为数据库中的数据

如果你需要什么信息，请告诉我。我会尽力提供的。谢谢你们的帮助，伙计们

我的型号代码：

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

namespace ChartInMvcApplication.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 ChartInMvcApplication.Models;

namespace ChartInMvcApplication.Controllers
{
    public class HomeController : 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 ChartInMvcApplication.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>

我的控制器代码：

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

namespace ChartInMvcApplication.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 ChartInMvcApplication.Models;

namespace ChartInMvcApplication.Controllers
{
    public class HomeController : 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 ChartInMvcApplication.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>

使用系统；
使用System.Collections.Generic；
使用System.Linq；
使用System.Web；
使用System.Web.Mvc；
使用chartinmvcapapplication.Models；
命名空间chartinmvcapapplication.Controllers
{
公共类HomeController:控制器
{
//
//回家/
公共行动结果索引（）
{
ProductModel OBJPProductModel=新ProductModel（）；
objProductModel.ProductData=新产品（）；
objProductModel.ProductData=GetChartData（）；
objProductModel.YearTitle=“年”；
objProductModel.SaleTitle=“销售”；
objProductModel.PurchaseTitle=“采购”；
返回视图（objProductModel）；
}
/// 
///代码以获取我们将传递给图表的数据
/// 
/// 
公共产品GetChartData（）
{
Product OBJPProduct=新产品（）；
/*从数据库中获取数据，并以字符串形式准备图表记录数据*/
objproduct.Year=“2009201020112012201312014”；
objproduct.Sale=“20001000300015002300500”；
objproduct.Purchase=“2100140002900240023001500”；
返回objproduct；
}
}
}

我的视图代码：

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

namespace ChartInMvcApplication.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 ChartInMvcApplication.Models;

namespace ChartInMvcApplication.Controllers
{
    public class HomeController : 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 ChartInMvcApplication.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>

@model chartinmvcapapplication.Models.ProductModel
load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
//创建并填充数据表。
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'）；
对于（i=0；i

您必须向每个产品对象添加数据

public Product GetChartData()
        {
            Product objproduct = new Product();
            //Get Data for years as a string list.
            List<string> years = Database.GetYears();
            foreach(var year in years) 
              GetChartDataForYear(year, ref objproduct);
            return objproduct; 
        }


        public void GetChartDataForYear(string year, Product objproduct out)
        {  
            if(!string.IsNullorEmpty(objproduct.Year))      
            objproduct.Year += (",");      


            if(!string.IsNullorEmpty(objproduct.Sale))      
            objproduct.Sale += (",");    

            if(!string.IsNullorEmpty(objproduct.Purchase ))      
            objproduct.Purchase += (",");      

            objproduct.Year += year.ToString();
            objproduct.Sale += GetSale(int year);
            objproduct.Purchase += GetPurchase(int year);

        }





public string GetSale(string year)
        {
            // To get from DB.
             return "";
        }




 public string GetPurchase(string year)
    {
       // To get from DB.
       return "";
    }

公共产品GetChartData（） { Product OBJPProduct=新产品（）； //以字符串列表的形式获取年数据。 List years=Database.GetYears（）； foreach（var年，以年为单位） GetChartDataForYear（年份，参考对象产品）； 返回objproduct； } public void GetChartDataForYear（字符串年份，产品对象产品输出） { 如果（！string.IsNullorEmpty（objproduct.Year）） 对象产品年+=（“，”）； 如果（！string.IsNullorEmpty（objproduct.Sale）） 对象产品销售+=（“，”）； 如果（！string.IsNullorEmpty（objproduct.Purchase）） 对象产品采购+=（“，”）； objproduct.Year+=Year.ToString（）； OBJPProduct.Sale+=GetSale（整数年）； objproduct.Purchase+=GetPurchase（整数年）； } 公共字符串GetSale（字符串年） { //从数据库中获取。 返回“”； } 公共字符串GetPurchase（字符串年） { //从数据库中获取。 返回“”； }

---

最好的方法是将数据库中的值绑定到列表中，然后进行foreach填充图表

在您的模型中，创建如下3个函数：

public List<string> getYears()
{
    List<string> years = new  List<string>();
    string connectionString = ConfigurationManager.AppSettings["StringConnection"].ToString();
    using (SqlConnection cn = new SqlConnection(connectionString))
    {
        cn.Open();
        SqlCommand sqlCommand = new SqlCommand("SELECT year FROM tableTest", cn);
        SqlDataReader reader = sqlCommand.ExecuteReader();
        while (reader.Read())
        {
            years.Add(reader["year"].ToString());
        }
        cn.Close();
    }
    return years;
}

public List<string> getSale()
{
    List<string> sales = new List<string>();
    List<string> years = getYears();
    foreach (var year in years)
    {
        string connectionString = ConfigurationManager.AppSettings["StringConnection"].ToString();
        using (SqlConnection cn = new SqlConnection(connectionString))
        {
            cn.Open();
            SqlCommand sqlCommand = new SqlCommand("SELECT sale FROM tableTest where year = '" + year + "'", cn);
            SqlDataReader reader = sqlCommand.ExecuteReader();
            while (reader.Read())
            {
                sales.Add(reader["sale"].ToString());
            }
            cn.Close();
        }
    }
    return sales;
}

public List<string> getPurchase()
{
    List<string> purchases = new List<string>();
    List<string> years = getYears();
    foreach (var year in years)
    {
        string connectionString = ConfigurationManager.AppSettings["StringConnection"].ToString();
        using (SqlConnection cn = new SqlConnection(connectionString))
        {
            cn.Open();
            SqlCommand sqlCommand = new SqlCommand("SELECT purchase FROM tableTest where year = '" + year + "'", cn);
            SqlDataReader reader = sqlCommand.ExecuteReader();
            while (reader.Read())
            {
                purchases.Add(reader["purchase"].ToString());
            }
            cn.Close();
        }
    }
    return purchases;
}

---

嗨@Vincet，我已经回答了你的问题。你能试试吗？请告诉我。非常感谢。