如何将数据从 Controller 绑定到图表 js 折线图以将其创建为动态？

Question

我正在使用 chart.js 从我在控制器中使用 linq 查询接收到的数据创建图表，return 这些值作为 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 序列化程序

上的设置所致

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]

如何将数据从 Controller 绑定到图表 js 折线图以将其创建为动态？

How to bind data from Controler to chartjs line chart to create it as dynamic?

javascript

json

asp.net-mvc-4

chart.js