javascript之如何在 asp mvc 应用程序中构建 ajax-chartjs 折线图

我认为有以下代码:

@Styles.Render("~/Content/newcss") 
@Scripts.Render("~/bundles/chartscripts") 
@Scripts.Render("~/scripts/jquery-1.10.2.js") 
@Scripts.Render("~/scripts/jquery.unobtrusive-ajax.js") 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.bundle.min.js"> 
</script> 
 
<script> 
$.ajax({ 
    type: "post", 
    url: "/GraphicsController/AjaxChart", 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    success: function () { 
    var ctx1 = document.getElementById("Linecanvas").getContext("2d"); 
    window.myBar = new Chart(ctx1, 
        {   type: 'line', 
            data: { 
                labels: [@Html.Raw(Json.Encode(@ViewBag.ContentIds))], 
                datasets: [{ 
                        label: "Common Responses", 
                        backgroundColor: "rgba(75,192,192,0.4)", 
                        borderWidth: 2, 
                        data: [@Html.Raw(Json.Encode(@ViewBag.ContentIds))] 
                    },{ 
                        label: "Delayed Responses", 
                        backgroundColor: "rgba(75,192,192,0.4)", 
                        borderWidth: 2, 
                        data:  
[@Html.Raw(Json.Encode(@ViewBag.DelayedResponseTimes))] 
                    }]}, 
            options:{title: 
                    {display: true, 
                        text: "Graphic"}, 
                    responsive: true, 
                    maintainAspectRatio: true 
                }});}, 
    error: function OnErrorCall_(repo) {alert("Woops something went wrong,  
pls try later !");}}); 
</script>   
</head> 
<body> 
<div id="wrapper"> 
    <div id="div-chart"> 
        <canvas id="Linecanvas"></canvas> 
    </div> 
    ... 
<body> 

在 Controller 中:

[HttpPost] 
public ActionResult AjaxChart() { 
  IEnumerable < DBContent > contents = db.DBContents; 
 
  var delayedResponses = contents.Where(r => r.DelayedResponseTime != 0).Select(x => x.DelayedResponseTime); 
  var commonResponses = contents.Where(r => r.CommonResponseTime != 0).Select(x => x.CommonResponseTime); 
  ViewBag.DelayedResponseTimes = delayedResponses.ToList(); 
  ViewBag.CommonResponseTimes = commonResponses.ToList(); 
 
  var ContentIds = new List < int > () {}; 
  for (var i = 1; i <= delayedResponses.Count(); i++) { 
    ContentIds.Add(i); 
  } 
  ViewBag.ContentIds = ContentIds; 
  return Json(delayedResponses.ToList(), JsonRequestBehavior.AllowGet); 
} 

我尝试使用 chartjs 构建折线图，但没有使用 Ajax 我已经完成了，但是我希望在不刷新页面且不在页面上执行任何操作(触发 Ajax，如单击按钮等)的情况下自动重建图表数据库中的新项目。使用此代码，我总是会转到 error block 。

请您参考如下方法:

您不能将 ViewBag 与 Ajax 一起使用，您只能返回一个结果对象。将所有这些返回的对象合并为一个父对象的属性:

[HttpGet] 
public ActionResult AjaxChart() { 
    IEnumerable<DBContent> contents = db.DBContents; 
 
    var delayedResponses = contents.Where(r => r.DelayedResponseTime != 0) 
                                   .Select(x => x.DelayedResponseTime); 
    var commonResponses = contents.Where(r => r.CommonResponseTime != 0) 
                                  .Select(x => x.CommonResponseTime); 
 
    var ContentIds = new List<int>(); 
    for (var i = 1; i <= delayedResponses.Count(); i++) { 
        ContentIds.Add(i); 
    } 
 
    var result = new { 
        DelayedResponseTimes = delayedResponses.ToList(), 
        CommonResponseTimes = commonResponses.ToList(), 
        ContentIds = ContentIds 
    }; 
    return Json(result, JsonRequestBehavior.AllowGet); 
} 

现在，在您的 jQuery 中，您需要获取数据(您没有这样做)。更改行:

success: function () { 

到:

success: function (result) { 

然后您需要将所有使用 ViewBag 的行更改为使用 result 参数:

success: function(result) { 
  var ctx1 = document.getElementById("Linecanvas").getContext("2d"); 
  window.myBar = new Chart(ctx1, { 
    type: 'line', 
    data: { 
      labels: result.ContentIds, 
      datasets: [{ 
        label: "Common Responses", 
        backgroundColor: "rgba(75,192,192,0.4)", 
        borderWidth: 2, 
        data: result.CommonResponseTimes 
      }, { 
        label: "Delayed Responses", 
        backgroundColor: "rgba(75,192,192,0.4)", 
        borderWidth: 2, 
        data: result.DelayedResponseTimes 
      }] 
    }, 
    options: { 
      title: { 
        display: true, 
        text: "Graphic" 
      }, 
      responsive: true, 
      maintainAspectRatio: true 
    } 
  }); 
}, 

最后，在您的方法的 URL 中，您必须使用不带后缀的 Controller 名称，因此请更改此行:

url: "/GraphicsController/AjaxChart", 

到:

url: "/Graphics/AjaxChart", 

最好让 ASP 为您生成 URL，以防您更改路由或重命名您的方法:

url: @Url.Action(nameof(GraphicsController.AjaxChart), "Graphics"),