0

我正在 mvc 4 asp.net Web 应用程序中使用 jqplot 创建一个多折线图。到目前为止，这就是我对其进行编码的方式，并且它可以按需要工作，只是数据在这里是硬编码的。我想从数据库中获取数据并将其从控制器传递到下面的脚本中。经过研究，我发现它需要 JSON 数据。我从未使用过 JSON，所以不确定如何进一步进行。任何人都可以通过建议我如何将 JSON 数据从我的控制器类传递到视图来帮助我。脚本如下：

    <script type="text/javascript">       
         $(document).ready(function () {          

             var types = ['Demand', 'Supply']; //, "OI"];

             var rawData = [{ "Demand": 4422.45, "Supply": 17660, "Date": "/Date(1236504600000)/", "DateString": "5 PM" }, { "Demand": 5019.27, "Supply": 20699, "Date": "/Date(1236508200000)/", "DateString": "6 PM" }, { "Demand": 5030.35, "Supply": 19917, "Date": "/Date(1236511800000)/", "DateString": "5 PM" }, { "Demand": 5172.35, "Supply": 23597, "Date": "/Date(1236515400000)/", "DateString": "6 PM" }, { "Demand": 5656.51, "Supply": 21572, "Date": "/Date(1236519000000)/", "DateString": "7 PM" }, { "Demand": 4622.88, "Supply": 7794, "Date": "/Date(1236522600000)/", "DateString": "8 PM" }, { "Demand": 3116.21, "Supply": 3427, "Date": "/Date(1236526200000)/", "DateString": "9 PM" }, { "Demand": 1588.83, "Supply": 1883, "Date": "/Date(1236529800000)/", "DateString": "10 PM" }, { "Demand": 1394.15, "Supply": 1403, "Date": "/Date(1236533400000)/", "DateString": "11 PM" }, { "Demand": 1321.76, "Supply": 3755, "Date": "/Date(1236537000000)/", "DateString": "12 AM" }, { "Demand": 1130.98, "Supply": 3474, "Date": "/Date(1236540600000)/", "DateString": "1 AM" }, { "Demand": 1277.1, "Supply": 1072, "Date": "/Date(1236544200000)/", "DateString": "2 AM" }, { "Demand": 1214.68, "Supply": 1025, "Date": "/Date(1236547800000)/", "DateString": "3 AM" }, { "Demand": 2117.91, "Supply": 1198, "Date": "/Date(1236551400000)/", "DateString": "4 AM" }, { "Demand": 1658.97, "Supply": 1485, "Date": "/Date(1236555000000)/", "DateString": "5 AM" }, { "Demand": 1997.36, "Supply": 3126, "Date": "/Date(1236558600000)/", "DateString": "6 AM" }, { "Demand": 2147.37, "Supply": 4785, "Date": "/Date(1236562200000)/", "DateString": "7 AM" }, { "Demand": 2114.13, "Supply": 5268, "Date": "/Date(1236565800000)/", "DateString": "8 AM" }, { "Demand": 2389.84, "Supply": 5264, "Date": "/Date(1236569400000)/", "DateString": "9 AM" }, { "Demand": 2240.77, "Supply": 5526, "Date": "/Date(1236573000000)/", "DateString": "10 AM" }, { "Demand": 1802.43, "Supply": 4530, "Date": "/Date(1236576600000)/", "DateString": "11 AM" }, { "Demand": 1929.71, "Supply": 6618, "Date": "/Date(1236580200000)/", "DateString": "12 PM" }, { "Demand": 545.65, "Supply": 2767, "Date": "/Date(1236583800000)/", "DateString": "1 PM" }, { "Demand": 0, "Supply": 1, "Date": "/Date(1236587400000)/", "DateString": "2 PM" }];

             var plotData = []

             for (var i = 0; i < rawData.length; i++) {
                 //Parse the date.
                 var date = new Date(+rawData[i].Date.match(/\d+/));

                 plotData[i] = [date, rawData[i].Demand];
             }

             var plotData2 = []

             for (var i = 0; i < rawData.length; i++) {
                 //Parse the date.
                 var date = new Date(+rawData[i].Date.match(/\d+/));

                 plotData2[i] = [date, rawData[i].Supply];
             }

             var plot1 = $.jqplot('chart1', [plotData, plotData2], {
                 height: 300,
                 width: 300,
                 title: 'Demand Supply',
                 series: [
                         {},
                         { yaxis: 'y2axis' }                        
                 ],
                 axes: {
                     xaxis: {
                         renderer: $.jqplot.DateAxisRenderer,
                         tickOptions: { formatString: '%#I %p' },
                         label: "Date",
                         tickInterval: '4 hour'                            
                     },
                     yaxis: {
                         label: "Demand",
                         labelRenderer: $.jqplot.CanvasAxisLabelRenderer

                     },
                     y2axis: {
                         label: "Supply",
                         labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                     }
                 },
                 highlighter: {
                     show: true,
                     sizeAdjust: 1
                 },
                 cursor: {
                     show: false
                 },
                 legend: {
                     show: true,
                     labels: types,
                     location: 'ne'
                 }
             });

             $(window).bind('resize', function (event, ui) {
                 if (plot1) {
                     plot1.replot();
                 }
             });

         });     
</script>

到目前为止编写的mvc代码：

//**Model**

            public class jqplotModel
            {               
             public double Demand{ get; set; }
             public double Supply{ get; set; }
             public DateTime Date { get; set; }
             public string DateString { get { return Date.ToString("h tt"); } } 
            }

控制器

            public ActionResult FetchGraphData()
            {
                Chart chart = new Chart();
                DataSet ds = dbLayer.GetChartData();

                DataTable dtChartData = ds.Tables[0];

                List<jqplotModel> chartData = new List<jqplotModel>();

                if (dtChartData .Rows.Count != 0)
                {
                    foreach (DataRow row in dtChartData .Rows)
                    {
                        chartData.Add(new jqplotModel{ Date = DateTime.Parse(@row["Date"].ToString()), Demand= Convert.ToDouble(@row["Demand"].ToString()), Supply= Convert.ToDouble(@row["Supply"].ToString()) });
                    }
                }

               return Json(chartData, JsonRequestBehavior.AllowGet);
            }

请建议如何在 jqPlot 中传递和使用 JSON 对象？我想用从控制器传递的 json 替换脚本中的“rawData”。任何帮助将非常感激。

4

0 回答 0