Question

我正在使用带有Razor的asp.net 我有一个控制器返回返回View（db.sales.ToList（））;

我的模特是

   public class sales
{
    public int ID { get; set; }
    public string month { get; set; }
    public int sale {get;set;}
}

我的观点得到了

@model IEnumerable<salesmonths.Models.sales>

我正在使用Javascript创建图表如何将月份提取到字符串表中和销售到int表

这是图表脚本

<script>

    var barChartData = {
        labels : ["January"],/// i want to place the month table here
        datasets : [

            {
                fillColor : "rgba(151,187,205,0.5)",
                strokeColor : "rgba(151,187,205,1)",
                data : [28,48,40,19,96,27,100] /// and the sale table here
            }
        ]

    }

var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);

</script>

Answer 1

您可以在页面完成加载到控制器操作方法后进行ajax调用，以获取 JSON 格式的数据并使用它来构建图表。大多数图表库接受JSON格式数据作为绘制图表的输入。

$(function(){

  $.getJSON("@Url.Action("Sales","Home")",function(response){
    //JSON data is in "response" variable now.
  });

});

假设您的Action方法在来自ajax请求时返回JSON表示。您可以使用Request.IsAjaxRequest方法确定请求是来自ajax请求还是普通的http请求。

public ActionResult Sales()
{
   var saleListVM=new List<salesmonths.Models.Sales>();
   // to do :Load data to the list
   if(Request.IsAjaxRequest())
   {
      return Json(saleListVM,JsonRequestBehaviour.AllowGet);
   }
   //not an ajax request- let's return the view model the normal view
   return View(saleListVM);
}

因此，当使用ajax请求调用时，此操作方法将返回数据的JSON表示，如下所示。

[
    {     "ID": 0, "month": "Jan", "sale": 134   },
    {     "ID": 0, "month": "FEb", "sale": 534   }
]

现在在你的getJSON方法的回调中，你可以遍历数组中的项目并将其设置为图表的“选项”。 $（function（）{

    $.getJSON("@Url.Action("Sales","Home")", function (response) {
        var salesLabels = [];
        var salesData = [];

        //Let's loop through the items in array and add to our temp array

        $.each(response, function (index, item) {
            salesLabels.push(item.month);
            salesData.push(item.sale);
        });

        var barChartData = {
                labels: salesLabels,
                datasets: [
                            {
                                fillColor: "rgba(151,187,205,0.5)",
                                strokeColor: "rgba(151,187,205,1)",
                                data: salesData
                            }
                        ]
                    };

       var myLine=new Chart(document.getElementById("canvas").getContext("2d"))
                                                         .Bar(barChartData);


    });

});
</script>

在Javascript中使用强类型数据

1 个答案: