如何將數據從Controler綁定到chartjs折線圖以創建動態數據？

Question

我正在使用chart.js從我在控制器中使用linq查詢檢索到的數據中創建圖表，並將這些值作為json返回，但是到目前為止，我已經嘗試過了並且沒有獲得json的那些值，這是到目前為止我嘗試過的：-

這是我的控制器：

 [HttpPost]
    public JsonResult MonthlyTurnover(string info)
    {
        var list = (from c in NMSDC.DataSends
                    where c.UserID == Session["UserID"].ToString() && c.RCommission != null && c.DT.Month == DateTime.Now.Month
                    group c by new { c.UserID, c.DT.Date } into g1
                    orderby g1.Key.Date descending
                    select new MonthlyTurnoverChart
                    {
                        Amount = g1.Sum(item => item.value),
                        NoOfTransaction = (int)g1.Count(),
                        //Date = g1.Key.Date.ToShortDateString()
                    }).ToList();
        return Json(list, JsonRequestBehavior.AllowGet);
    }

以及“視圖”和“我的JavaScript”如下：

 <div class="col-md-6" style="margin-left: 2em;"> <!-- Line CHART --> <div class="box box-primary"> <div class="box-header with-border"> <h3 class="box-title">Monthly Turnover</h3> <div class="box-tools pull-right"> <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> </button> </div> </div> <div class="box-body"> <div class="chart"> <canvas id="lineChart" height="200" width="200"></canvas> </div> </div> <!-- /.box-body --> </div> <!-- /.box --> </div> 

現在我寫的Javascript：

 $(function() { var path = window.location.href; if (path == "http://localhost:55261/Retailer") { var info = $("#lbllogininfo").val(); alert(info); $.ajax({ type: "POST", url: '/Retailer/MonthlyTurnover', data: JSON.stringify({ info: info }), dataType: 'json', contentType: 'application/json', success: function(list) { << < ---------------The Problem Is Here I am Getting Values as [[object][Object], [object][Object], [object][Object], [object][Object]] ------ >> alert("all data recivcd :" + list); var alldata = $.each(list, function(data) { alldata = "'" + data.Amount + "'"; }); var lbl = alldata[0]; var dataset1 = alldata[1]; var dataset2 = alldata[2]; var cdata = { labels: lbl, datasets: [{ label: "My First Dataset", fillColor: "rgba(220,220,220,0.2)", strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", data: dataset1 }, { label: "My Second dataset", fillColor: "rgba(151,187,205,0.2)", strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(151,187,205,1)", data: dataset2 }] }; alert("AllData: " + alldata); alert("Chart Data: " + list); Chart.defaults.global.responsive = true; var ctx = $("#lineChart").get(0).getContext('2d'); var linechart = new Chart(ctx).Line(cdata, { bezierCurve: false }); }, error: function(data) { alert("Chart Error: " + data); } }); } }); 

模型如下：

public class MonthlyTurnoverChart
{
    public decimal Amount { get; set; }
    public Nullable<int> NoOfTransaction { get; set; }
    public string Date { get; set; }
}

Answer 1

您將必須使用某種for循環。

請注意，屬性情況在您這邊可能會有所不同，這是由於Json Serializer上的設置所致

var dataset1 = new array();
var dataset2 = new array();

for (var i = 0; i < list.length; i++) {
  dataset1.push(list[i].Amount);
  dataset2.push(list[i].NoOfTransaction);
}

現在dataset1將是：

[Amount1, Amount2, Amount3, Amount4, Amount5]

現在dataset2將是：

[NoOfTransaction1, NoOfTransaction2, NoOfTransaction3, NoOfTransaction4, NoOfTransaction5]