Question

我试图在条形图中显示最近7天的数量。因为我正在使用条形图和asp.net mvc c＃。我创建了存储过程，从数据库返回2个表。现在在这个页面中，我可以显示第一个表格数据。但不知道如何在图表中显示第二个表格数据。找到下面的表格结构

这是我的第一个返回表数据=＆gt;

DateColumn | Count
09-05-2017    10
08-05-2017    05
07-05-2017    20
06-05-2017    4000
05-05-2017    30
04-05-2017    5000
03-05-2017    40

这是我的第二个表格数据=＆gt;

DateColumnForManual | TotalCountForManual
09-05-2017             10
08-05-2017             05
07-05-2017             20
06-05-2017             4000
05-05-2017             30
04-05-2017             5000
03-05-2017              40

这是我在c＃=＆gt;

中的课程

  public class Dashboard
  {
    public string DateColumn { get; set; }

    public int TotalCount { get; set; }

    public string DateColumnForManual { get; set; }

    public int TotalCountForManual { get; set; }
 }

这是我的状态类=＆gt;

public class Status
{
    public bool Result { get; set; }
    public object Data { get; set; }        
}

这是我的服务器端方法=＆gt;

public JsonResult GetCount()
    {
            Dashboard objDashboard = new Dashboard();
            var Count = objDashboard.GetDashboard();
            return Json(new { data = Count.Data }, JsonRequestBehavior.AllowGet);            
    }

这是我的Dashboard.cs =＆gt;

 public Status GetDashboard()
     {
        Status Status = new Status();            
            DataSet ds = DataAccess.ExecuteDataset(Settings.ConnectionString(), "spGetDashboard");

            if (ds != null && ds.Tables.Count > 0)
            {
                List<Dashboard> ListActivity = new List<Dashboard>();
                for (int i = 0; i < ds.Tables[0].Rows.Count; i++) // this is my 1st table return 
                {
                    Dashboard objActivity = new Dashboard();
                    objActivity.DateColumn = ds.Tables[0].Rows[i]["DateColumn"].ToString();
                    objActivity.TotalCount = Convert.ToInt32(ds.Tables[0].Rows[i]["TotalCount"]);
                    ListActivity.Add(objActivity);
                }
                for (int i = 0; i < ds.tables[1].rows.count; i++) // this is my 2nd table return
                {
                   Dashboard objactivity = new Dashboard();
                   objactivity.datecolumnformanual = ds.tables[1].rows[i]["datecolumnformanual"].tostring();
                   objactivity.totalcountformanual = convert.toint32(ds.tables[1].rows[i]["totalcountformanual"]);
                   listactivity.add(objactivity);
                }
                Status.Data = ListActivity;
                Status.Result = true;
            }
            else
            {
                Status.Result = false;
            }           
        return Status;
    }

这里我的ajax call =＆gt;

<script type="text/javascript">
$(document).ready(function () {        
$.ajax({
    url: 'Home/GetCount',
    dataType: "json",
    type: "GET",
    contentType: 'application/json; charset=utf-8',
    async: false,
    processData: false,
    cache: false,
    delay: 15,
    success: function (data) {
          var arrlable = new Array();
            var arrdata = new Array();
            var arrdataForManual = new Array();

            for (var i = 0; i < data.data.length; i++) {
                arrlable.push(data.data[i].DateColumn);
                arrdata.push(data.data[i].TotalCount);
                //arrdataForManual.push(data.data[i].TotalCountForManual);
            }
            AutoFollow(arrlable, arrdata);
    },
    error: function (xhr) {
        alert('error');
    }
});

}）;

 function AutoFollow(arrlable, arrdata)
 {
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: arrlable, // here show date
        datasets: [{
            label: 'AutoFollow',
            data: arrdata
            backgroundColor: "rgba(153,255,51,1)"
        }, {
            label: 'Manual',
            data: [30, 29, 5, 5, 20, 3, 10], // here i want to show 2nd table data
            backgroundColor: "rgba(255,153,0,1)"
        }]
    },            
});
}

这里的草图我显示autofollow计数是动态显示我想要从数据库手动计数，这来自第二个表格数据。

上面我展示了我的整个代码，我想在条形图中显示我的第二个表数据，任何人都知道如何做到这一点请让我？

Answer 1

我认为您可以在 AutoFollow 功能中添加其他参数。此附加参数将存储手动数据。您的脚本可能如下所示

<script type="text/javascript">
$(document).ready(function () {        
    $.ajax({
        url: 'Home/GetCount',
        dataType: "json",
        type: "GET",
        contentType: 'application/json; charset=utf-8',
        async: false,
        processData: false,
        cache: false,
        delay: 15,
        success: function (data) {
                var arrlable = new Array();
                var arrdata = new Array();
                var arrdataForManual = new Array();

                for (var i = 0; i < data.data.length; i++) {
                    if (data.data[i].DateColumn && data.data[i].DateColumn != "") {
                        arrlable.push(data.data[i].DateColumn);
                        arrdata.push(data.data[i].TotalCount);
                    } else {
                        arrdataForManual.push(data.data[i].TotalCountForManual);
                    }
                }
                AutoFollow(arrlable, arrdata, arrdataForManual);
        },
        error: function (xhr) {
            alert('error');
        }
    });
});

 function AutoFollow(arrlable, arrdata, arrdataForManual)
 {
    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: arrlable, // here show date
        datasets: [{
            label: 'AutoFollow',
            data: arrdata,
            backgroundColor: "rgba(153,255,51,1)"
        }, {
            label: 'Manual',
            data: arrdataForManual,
            backgroundColor: "rgba(255,153,0,1)"
        }]
        },            
    });
}

如何在mvc c＃中使用ajax调用在条形图中绑定2个表动态数据？

1 个答案: