页面代码:
<html>
<head>
<script src="jQuery.js" type="text/javascript"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script >
window.onload = function () {
var dps = [];
var chart = new CanvasJS.Chart("chartContainer", {
exportEnabled: true,
title: {
text: "Dynamic Spline Chart"
},
axisY: {
includeZero: false
},
data: [{
type: "spline",
markerSize: 0,
dataPoints: dps
}]
});
var xVal = 0;
var yVal = 0;
var updateInterval = 1000;
var dataLength = 50; // number of dataPoints visible at any point
var DealY = function () {
$.ajax({
type: 'post',
url: "WebForm1.aspx/GetNumTest",
contentType: "application/json; charset=utf-8",
dataType: 'json',
// async:false,
success: function (data) {
yVal = data.d;
}
});
}
var updateChart = function (count) {
count = count || 1;
// count is number of times loop runs to generate random dataPoints.
for (var j = 0; j < count; j++) {
//yVal = yVal + Math.round(5 + Math.random() * (-5 - 5));
DealY();
dps.push({
x: xVal,
y: yVal
});
xVal++;
}
if (dps.length > dataLength) {
dps.shift();
}
chart.render();
};
updateChart(dataLength);
setInterval(function () { updateChart() }, updateInterval);
}
</script>
</head>
<body>
<div id="chartContainer" style="width: 100%; height: 300px;">
</div>
</body>
</html>
DealY()方法通过ajax获得该页面.cs里的方法GetNumTest()return的数据。
页面设置setInterval定时间隔调用updateChart方法,更新X,Y值。
后台代码GetNumTest方法返回需要的数据。
static Random ran = new Random();
[WebMethod]
public static int GetNumTest()
{
int getNum = ran.Next(0, 100);
return getNum;
}
注意:方法要添加[WebMethod],需要添加using System.Web.Services;引用。
具体值可以从数据库查询,或者从任何服务端、数据源拿值。
运行效果: