【发布时间】：2021-03-22 11:42:13
【问题描述】：
我正在使用 asp.net core MVC 为我的应用程序创建动态图表。我正在使用 CanvasJS 来绘制图表。
我想根据屏幕上选择的参数绘制图表数据。因此，我有一个下拉列表和一个数据表，用于定义从数据库中检索哪些数据。
问题是点击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}]}
我在return GeneralObjects.RES.R_OKK; 之前得到了这个值但是，它没有得到更新......
提前感谢您的任何建议。
【问题讨论】：
标签： javascript jquery charts asp.net-core-mvc canvasjs