如何将数据从Controler绑定到chartjs折线图以将其创建为动态？ [英] How to bind data from Controler to chartjs line chart to create it as dynamic?

问题描述

我正在使用chart.js从我在controler中使用linq查询的数据创建图表并将这些值作为json返回但是到目前为止我已经尝试了这个并且没有得到json的那些值，这就是我所拥有的到目前为止尝试： -



这是我的控制器： -

I am using chart.js to create chart from the data i recive using linq query in my controler and return those values as json but so far i have tried this and isnt getting those values of the json, Here is what i Have tried so far:-

This is my Controller:-

[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);
        }

和View和我的Javascript如下： -

and the View and My Javascript are As Follows:-

<div class="col-md-6" style="margin-removed 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"></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： -

Now the Javascript that i wrote:-

$(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);
            }
        });
    }
});

和模型如下：

and the Model Is as Follows:

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

推荐答案

（ function （）{
var path = window 。 location .href;
if （path == http：// localhost：55261 /零售商）{
var info =

(function () { var path = window.location.href; if (path == "http://localhost:55261/Retailer") { var info =

（ #lbllogininfo）。val（）;
alert（info）;

("#lbllogininfo").val(); alert(info);

.ajax（{
type： POST ，
url：' / Retailer / MonthlyTurnover'，
data： JSON .stringify（{info：info}），
dataType ：' json'，
contentType：' application / json'，
success： function （list）{< << ---------------问题在这里
我得到的值是
[[object] [Object]，[object] [Object] ，[object] [Object]，[object] [Object]] ------>>

alert（ 所有数据已恢复： + list）;
var alldata =

.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 =

这篇关于如何将数据从Controler绑定到chartjs折线图以将其创建为动态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！