asp.net頁面通過Javascript使用CanvasJS.Chart畫曲線，曲線實現動態載入後臺資料（通過ajax）
阿新 • • 發佈：2018-12-12
頁面程式碼：
<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;引用。
具體值可以從資料庫查詢，或者從任何服務端、資料來源拿值。
執行效果：
