CanvasJS动态加载数据MVC剃刀

Question

我正在使用ASP.NET core MVC为我的应用程序创建动态图表。我正在使用CanvasJS绘制图表。

我想根据屏幕上选择的参数绘制图表数据。因此，我有一个dropdownlist和一个datatable来定义从数据库检索哪些数据。

问题是在我单击updatechart按钮后没有加载我的图表。然而，当我调试应用程序时，根据控制台日志，js函数正在工作，但它不更新图表中的data。

我的看法是

<script>
   var chart;
   function myFunction() {
       console.log("Inside My Function_1");
       chart = new CanvasJS.Chart("chart-container", {
           zoomEnabled: true,
           title: {
               text: '@Html.Raw(ViewBag.ChartText)'//"My Text"
           },
           axisX: {
               title: "chart updates every 2 secs",
               crosshair: {
                   enabled: true,
                   snapToDataPoint: true
               }
           },
           axisY: {
               crosshair: {
                   enabled: true,
                   snapToDataPoint: true,
                   valueFormatString: "#,##0"
               }
           },
           toolTip: {
               shared: true
           },
           legend: {
               dockInsidePlotArea: true,
               verticalAlign: "top",
               horizontalAlign: "right"
           },
           data: [ @Html.Raw(ViewBag.AllData) ]
   });
       console.log("Inside My Function_2");
       chart.render();
       console.log("Inside My Function_3");

       }
   window.onload = myFunction;


   function GetData() {
       var table = $('#dataTable').DataTable();
       var data = table.$('input[type="checkbox"]').serializeArray();
       $.ajax({
           type: "POST",
           url: '@Url.Action("UpdateChart","Home")', //"/Home/UpdateChart",
           contentType: "application/x-www-form-urlencoded",
           data: data,
           dataType: "html",
           success: function (result) {
               console.log("Container remove called.");
               chart.destroy();
               //$('#chart-container').remove();
               //console.log("Container removed called.");
               //$('#graph-container').append('<div id="chart-container" class="chart-area-big"><div>');
               //console.log("Container appened again.");

               myFunction();
               console.log(result);
           }
       });
   }

</script>

       <div id="graph-container" class="card shadow mb-4">
           <div class="d-block card-header py-3">
               <h6 class="m-0 font-weight-bold text-primary">Chart</h6>
           </div>
           <div id="chart-container" class="chart-area-big">

           </div>
       </div>
<button type="button" id="getDataBtn" class="btn btn-success" onclick="GetData();">Update Chart</button>

我的控制器就像

public IActionResult ChartNew()
        {
            ChartRepository repository = new ChartRepository();
            GeneralObjects.ServiceResponse response = repository.GetChartData();
            List<Devices> tmpList = repository.GetCustomerDevices();
            ViewData["CustomerDevices"] = new Microsoft.AspNetCore.Mvc.Rendering.SelectList(tmpList, "Id", "SerialNumber");

            string query = "SELECT mqttpacket_1606008363.id, datatypes.data_name ,mqttpacket_1606008363.data_value,packetinformation.inserted_time  FROM mqttpacket_1606008363 JOIN packetinformation ON mqttpacket_1606008363.packet_id = packetinformation.id JOIN datatypes ON mqttpacket_1606008363.data_type_id = datatypes.id WHERE packetinformation.inserted_time BETWEEN '2021-03-04 10:44:55.544398' AND '2021-03-05 10:49:55.544398' AND data_type_id = 5 ORDER BY inserted_time asc;";
            response = repository.GetChartData(query);

            ViewBag.ChartText = $"Reading Values of {ViewBag.DataPointName1} and {ViewBag.DataPointName2}";
            ViewBag.AllData = response.This_Object;


            System.Data.DataTable dt = repository.GetDataTypes();
            return View(dt);
        }

        [HttpPost]
        public GeneralObjects.RES UpdateChart()
        {
            
            ChartRepository repository = new ChartRepository();

            string deviceSerialNo = HttpContext.Session.GetString("currentSerialNumber") != null ? HttpContext.Session.GetString("currentSerialNumber").ToString() : "1606008363";
            string selectedDataTypes = HttpContext.Request.Form["chkBox"].ToString();

            string query = repository.PrepSelectQuery(selectedDataTypes, deviceSerialNo, "2021-03-05 10:44:55.544398", "2021-03-11 12:44:55.544398");

            GeneralObjects.ServiceResponse response = repository.GetChartData(query);

            if (response.Return_Code != 0)
                return GeneralObjects.RES.R_NOK;

            TempData["SuccessMSG"] = "Successfull!";
            ViewBag.AllData = response.This_Object;

            return GeneralObjects.RES.R_OKK;
        }

例如，当我从屏幕response.ThisObject中选择参数时，如下所示

{type: "line",
markerType:"none",
xValueType:"dateTime",
xValueFormatString:"DDDD MMM YYYY HH:mm:ss",
name:'Discharge',
showInLegend: true,
dataPoints:[{"x":1614937497000.0,"y":315.0},{"x":1614937502000.0,"y":315.0},{"x":1614937507000.0,"y":317.0},{"x":1614937517000.0,"y":320.0},{"x":1614937523000.0,"y":320.0},{"x":1614937528000.0,"y":322.0},{"x":1614937533000.0,"y":322.0},{"x":1614937537000.0,"y":323.0},{"x":1614937543000.0,"y":325.0},{"x":1614937547000.0,"y":325.0},{"x":1614937552000.0,"y":327.0},{"x":1614937563000.0,"y":328.0},{"x":1614937573000.0,"y":330.0},{"x":1614937583000.0,"y":331.0},{"x":1614937588000.0,"y":331.0},{"x":1614937593000.0,"y":332.0},{"x":1614937598000.0,"y":332.0},{"x":1614937603000.0,"y":333.0},{"x":1614937608000.0,"y":334.0}]}
{type: "line",
markerType:"none",
xValueType:"dateTime",
xValueFormatString:"DDDD MMM YYYY HH:mm:ss",
name:'subcooling',
showInLegend: true,
dataPoints:[{"x":1614937507000.0,"y":22.0},{"x":1614937513000.0,"y":22.0},{"x":1614937517000.0,"y":24.0},{"x":1614937528000.0,"y":23.0},{"x":1614937537000.0,"y":24.0},{"x":1614937558000.0,"y":26.0},{"x":1614937568000.0,"y":25.0},{"x":1614937573000.0,"y":23.0},{"x":1614937578000.0,"y":23.0},{"x":1614937603000.0,"y":22.0},{"x":1614937613000.0,"y":21.0}]}

在返回GeneralObjects.res.r_okk；之前，我得到了这个值。但是，它没有更新...

事先谢谢你的任何建议。

Answer 1

问题是，您试图在客户端能够从后端接收数据之前呈现图表。来自后端的数据还不存在，每次点击按钮时，这就是为什么它什么都没有呈现的原因。

从后端接收数据后，尝试调用chart.render()。