C#曲线分析平台的制作（四，highcharts+ajax加载后台数据）

在上一篇博客：C#曲线分析平台的制作（三，三层构架+echarts显示）中已经完成了后台的三层构架的简单搭建，为实现后面的拓展应用开发和review 改写提供了方便。而在曲线分析平台中，往往有要求时间轴联动功能，即不仅能够实时的查看在线曲线，还要能通过拉动时间轴来实现往期数据的回顾。在这一点上highcharts旗下的highstock很好的实现了时间轴联动功能，故而制作一个小demo来进行学习，演示。

1.后台数据模拟：

依据上一篇博客建立的数据库，进行数据填充：

declare @DateTime datetime

declare @EndDateTime datetime

declare @Sgrade float

set @DateTime='2018-6-30'

set @EndDateTime = '2018-7-2'

while @DateTime <= @EndDateTime

begin

set @Sgrade=cast(floor(rand()*1000) as float)

insert into Student(Datetimee,Sgrade) values(@DateTime,@Sgrade)

--每5分钟记录一个数据

set @DateTime=DATEADD(n, +5, @DateTime)

end

2.前台ajax改写：

a.准备工作：（导入相关的js）

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script src="Scripts/jquery-3.3.1.js"></script>

    <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>

    <script src="https://img.hcharts.cn/highstock/highstock.js"></script>

    <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>

    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>

    <script src="https://img.hcharts.cn/highcharts/themes/grid-light.js"></script>

    <script src="http://google.github.io/traceur-compiler/bin/traceur.js" type="text/javascript"></script>

    <title></title>

</head>

<body>

    <div id="main" style="width: 1500px;height:400px;"></div>

    <script  src="JavaScript.js"></script>

</body>

</html>

b.javascript.js编写：

Highcharts.setOptions({

    global: {

        useUTC: false

    }

});

var chart = null;

var names = [];

// Create the chart

$(document).ready(function () {

    seriesOptions = [];

    chart = new Highcharts.stockChart({

       

        chart: {

            renderTo: 'main',

            type: 'spline',

        },

        rangeSelector: {

            buttons: [{

                type: 'minute',

                count: 5,

                text:'5分钟',

            },

                {

                    type: 'hour',

                    count: 1,

                    text: '小时'

                }, {

                    type: 'day',

                    count: 1,

                    text: '一天'

                }, {

                    type: 'all',

                    text: '所有'

                }],

            inputEnabled: false,

            selected: 0,

        },

        title: {

            text: 'highstock test demo'

        },

        tooltip: {

            split: false

        },

        exporting: {

            enabled: true

        },

        xAxis: {

            type: 'datetimee',

            data: datatim,

            tickPixelInterval: 150,

            maxZoom: 20 * 1000

        },

        yAxis: {

            minPadding: 0.2,

            maxPadding: 0.2,

            title: {

                text: 'sgrade',

                margin: 80

            }

        },

        series: [{

            name: 'demo',

            data:[],

        }]

    });

    var datatim = [];

    $.ajax({

        type: "post",

        async: false,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）

        url: "Default.aspx?method=getdata",

        data: {},

        dataType: "json",        //返回数据形式为json

        success: function (result) {

            for (i in result) {

                var r = result[i];

                datatim.push([r.datetimee, r.Sgrade]);//利用push方法将其格式固定为[x,y]方式。

            }

            //var datatim = result.map(function (user) { //利用map方法将返回的对象数组中对应的点取出

            //    return [user.datetimee, user.Sgrade]; //返回相应的[x,y]数组格式

            //});

            console.log(datatim);

            /*测试setdata支持的数据格式

          var array = [12, 3, 4, 5, 6, 78, 9, 22];

          var array1 = [['2015-05-27 00:06:00', 11], ['2015-05-28 00:07:00', 12], ['2015-06-28 00:08:00', 128]];

          chart.series[0].setData(array1);

          */

            chart.series[0].setData(datatim);

            chart.series[0].addPoint(['2015-06-30 00:03:00', 128]);   //测试addPoint方法（添加点到曲线的末尾）

        },

    })

})

c.效果：

3.要点整理：

主要利用ajax从后台接收到的对象数组类型，如下格式：

[{datetimee: "2018-06-30 00:00:00", Sgrade: 169}, {datetimee: "2018-06-30 00:05:00", Sgrade: 86},…]

highstock的数据格式采用的是[[时间,数据],[时间,数据],[时间,数据],[时间,数据]]

然后转换成highcharts能接受的数据格式即可。

1.chart.series[0].setData()能接收的类型：（点击打开链接）

2.转换方法：1.利用数组的push方法，将格式固定[x,y]。2.主要利用map方法，将其中的datetimee和sgrade对应的值取出来，重新构成数组:[[x,y]](JS的map方法介绍)

4：时间轴缩放：

增加时间轴的缩放功能（实际上就是让datetime正确显示即可）

   var datatim = [];

    var time = [];

    $.ajax({

        type: "post",

        async: false,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）

        url: "Default.aspx?method=getdata",

        data: {},

        dataType: "json",        //返回数据形式为json

        success: function (data) {

            //for (i in result) {

            //    var r = result[i];

            //    datatim.push([r.datetimee, r.Sgrade]);//利用push方法将其格式固定为[x,y]方式。

            //    time.push([r.datetimee]);

            //}

            data.forEach(function (e, j) {

                var a = new Array();

                console.log(e.datetimee);

                a.push(Date.parse(e.datetimee));

                a.push(e.Sgrade);

                datatim.push(a);

            });

            //var datatim = result.map(function (user) { //利用map方法将返回的对象数组中对应的点取出

            //    return [user.datetimee, user.Sgrade]; //返回相应的[x,y]数组格式

            //});

            console.log(datatim);

            /*测试setdata支持的数据格式

          var array = [12, 3, 4, 5, 6, 78, 9, 22];

          var array1 = [['2015-05-27 00:06:00', 11], ['2015-05-28 00:07:00', 12], ['2015-06-28 00:08:00', 128]];

          */

            console.log(Date.parse('2015-05-28 00:08:00'));

            //console.log(leave);

            chart.series[0].setData(datatim);

            //chart.series[0].addPoint(['2015-06-30 00:03:00', 128]);   //测试addPoint方法（添加点到曲线的末尾）

        },

    })

原理：highcharts能接收的时间类型为时间戳类型，故而需要利用js自带的Date.parse(Datetime)将其转换为时间戳类型。转换后导入x轴数组即可实现时间轴拖动缩放。

参考资料：JS时间戳与时间格式互换

5：动态加载：

在新项目中，一般如何实现对数据的动态加载展示是一个很炫的问题。让曲线动起来，本文采用比较传统的方式，直接设置setInterval(),定时ajax局部加载即可。

a.数据准备：

利用SQL SERVER自带的作业功能，对插入语句进行定时执行，实现每10秒中插入一次数据。

SQL 语句：

declare @i int

declare @datetimee datetime

set @datetime=CONVERT(varchar,GETDATE(),120)

set @i=cast( floor(rand()*N) as int )

begin

insert into student(datetimee,sgrade) values (@datetimee,@i)

end

b.改写javascript.js(将ajax部分进行函数封装调用SetInterVal()执行）

    function getdata() {

        var datatim = [];

        var time = [];

        $.ajax({

            type: "post",

            async: false,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）

            url: "Default.aspx?method=getdata",

            data: {},

            dataType: "json",        //返回数据形式为json

            success: function (data) {

                //for (i in result) {

                //    var r = result[i];

                //    datatim.push([r.datetimee, r.Sgrade]);//利用push方法将其格式固定为[x,y]方式。

                //    time.push([r.datetimee]);

                //}

                data.forEach(function (e, j) {

                    var a = new Array();

                    console.log(e.datetimee);

                    a.push(Date.parse(e.datetimee));

                    a.push(e.Sgrade);

                    datatim.push(a);

                });

                //var datatim = result.map(function (user) { //利用map方法将返回的对象数组中对应的点取出

                //    return [user.datetimee, user.Sgrade]; //返回相应的[x,y]数组格式

                //});

                console.log(datatim);

                /*测试setdata支持的数据格式

              var array = [12, 3, 4, 5, 6, 78, 9, 22];

              var array1 = [['2015-05-27 00:06:00', 11], ['2015-05-28 00:07:00', 12], ['2015-06-28 00:08:00', 128]];

              */

                console.log(Date.parse('2015-05-28 00:08:00'));

                //console.log(leave);

                chart.series[0].setData(datatim);

                //chart.series[0].addPoint(['2015-06-30 00:03:00', 128]);   //测试addPoint方法（添加点到曲线的末尾）

            },

        })

    }

    setInterval(getdata, 10000);

c.实现效果：

未完待续:

1.利用时间选择工具，选择相应时间段内的曲线部分。

2.利用树形工具，选择多条曲线。