asp.net页面通过Javascript使用CanvasJS.Chart画曲线，曲线实现动态加载后台数据（通过ajax）

页面代码：

<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;引用。

具体值可以从数据库查询，或者从任何服务端、数据源拿值。

运行效果：

asp.net页面通过Javascript使用CanvasJS.Chart画曲线，曲线实现动态加载后台数据（通过ajax）

猜你喜欢