CanvasJS 动态加载数据 MVC Razor

Question

我正在使用 asp.net 核心 MVC 为我的应用程序创建动态图表。我正在使用 CanvasJS 绘制图表。

我想根据屏幕上的 selected 参数绘制图表数据。因此，我有一个下拉列表和一个数据表，用于定义要从数据库中检索的数据。

问题是单击 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;
        }

比如当我select屏幕上的参数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}]}

我在 return GeneralObjects.RES.R_OKK; 之前得到了这个值，但是，它没有得到更新...

提前感谢您的任何建议。

Answer 1

问题是您试图在客户端可以从后端接收数据之前呈现图表。来自后端的数据还没有，每次你点击按钮，这就是为什么它没有任何东西呈现。

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

Answer 2

使用ajax进行更新时，不要将数据存储在ViewBag中，因为ViewBag中的数据不会在视图中发生变化。

我建议你可以直接return更新动作中的数据。

一个简单的例子从 Official Site

@{
    ViewData["Title"] = "Home Page";
}

<div id="chartContainer" style="height: 370px; width: 100%;"></div>

<button type="button" id="getDataBtn" class="btn btn-success" onclick="Update();">Update Chart</button>
@section scripts{

    <script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
    <script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
    <script>

        var dataPoints = [];
        var chart
        function addData(data) {

            for (var i = 0; i < data.length; i++) {
                dataPoints.push({
                    x: new Date(data[i].x),
                    y: data[i].y
                });
            }

            chart = new CanvasJS.Chart("chartContainer", {
                animationEnabled: true,
                theme: "light2",
                title: {
                    text: "Lenovo Group Stock Price-2017"
                },
                axisY: {
                    title: "In HK$",
                    titleFontSize: 24
                },
                data: [{
                    type: "line",
                    yValueFormatString: "HK$#,###",
                    dataPoints: dataPoints
                }]
            });
            chart.render();
        }

        window.onload = function () {
            $.ajax({
                method: 'get',
                url: '/home/json',
                success: function (data) {
                    addData(data)
                }
            })
        }

        function Update() {
            dataPoints = [];
            $.ajax({
                method: 'get',
                url: '/home/json2',
                success: function (data) {
                    addData(data)
                }
            })
        
        }
    </script>
}

控制器：

public IActionResult Index()
{
    return View();
}

public ContentResult JSON()
{
    List<DataPoint> dataPoints = new List<DataPoint>();
    dataPoints.Add(new DataPoint(1481999400000, 4.67));
    dataPoints.Add(new DataPoint(1482604200000, 4.7));
    dataPoints.Add(new DataPoint(1483209000000, 4.96));
    dataPoints.Add(new DataPoint(1483813800000, 5.12));
    dataPoints.Add(new DataPoint(1484418600000, 5.08));
    dataPoints.Add(new DataPoint(1485023400000, 5.11));
    dataPoints.Add(new DataPoint(1485628200000, 5));
    dataPoints.Add(new DataPoint(1486233000000, 5.2));
    dataPoints.Add(new DataPoint(1486837800000, 4.7));
    dataPoints.Add(new DataPoint(1487442600000, 4.74));

    JsonSerializerSettings _jsonSetting = new JsonSerializerSettings() { NullValueHandling = NullValueHandling.Ignore };
    return Content(JsonConvert.SerializeObject(dataPoints, _jsonSetting), "application/json");
}

public ContentResult JSON2()
{
    List<DataPoint> dataPoints = new List<DataPoint>();
    dataPoints.Add(new DataPoint(1481999400000, 4.67));
    dataPoints.Add(new DataPoint(1482604200000, 4.7));
    dataPoints.Add(new DataPoint(1483209000000, 4.96));
    dataPoints.Add(new DataPoint(1483813800000, 5.12));
    dataPoints.Add(new DataPoint(1484418600000, 5.08));
    dataPoints.Add(new DataPoint(1485023400000, 5.11));
    dataPoints.Add(new DataPoint(1485628200000, 5));
    dataPoints.Add(new DataPoint(1486233000000, 5.2));
    dataPoints.Add(new DataPoint(1486837800000, 4.7));
    dataPoints.Add(new DataPoint(1487442600000, 4.74));
    dataPoints.Add(new DataPoint(1488047400000, 4.67));
    dataPoints.Add(new DataPoint(1488652200000, 4.66));
    dataPoints.Add(new DataPoint(1489257000000, 4.86));
    dataPoints.Add(new DataPoint(1489861800000, 4.91));
    dataPoints.Add(new DataPoint(1490466600000, 5.12));
    dataPoints.Add(new DataPoint(1491071400000, 5.4));
    dataPoints.Add(new DataPoint(1491676200000, 5.08));
    dataPoints.Add(new DataPoint(1492281000000, 5.05));
    dataPoints.Add(new DataPoint(1492885800000, 4.98));
    dataPoints.Add(new DataPoint(1493490600000, 4.89));
    dataPoints.Add(new DataPoint(1494095400000, 4.9));
    dataPoints.Add(new DataPoint(1494700200000, 4.95));
    dataPoints.Add(new DataPoint(1495305000000, 4.88));
    dataPoints.Add(new DataPoint(1495909800000, 5.07));
    JsonSerializerSettings _jsonSetting = new JsonSerializerSettings() { NullValueHandling = NullValueHandling.Ignore };
    return Content(JsonConvert.SerializeObject(dataPoints, _jsonSetting), "application/json");
}

CanvasJS 动态加载数据 MVC Razor

CanvasJS Load Data Dynamically MVC Razor

javascript

jquery

charts

canvasjs

asp.net-core-mvc