ASP.NET中实现动态曲线图的视频教程

  点击下面的入口可以在线观看视频

 最近在项目中有个需求，把从数据库中读到的数据输出折线图并且是随着时间的推移动态的显示不同位置的数据这就要用到了动态折线图。刚开始项目中大部分的折线图都是用的MSchart  微软的这个控件是够强大，但是研究了好久不知道怎么实现动态的显示曲线（如果有知道的也请给我说下 一起学习），于是乎就想到了jquery+highCharts来实现，由于我使用的是异步处理，我的数据是从后台传到前台的客户端的，所以使用到了json 来传数据。下面就把这个小知识点分享给大家。

   效果图

一、实现步骤

  ①准备需要的文档

    在这里我用的是jquery 、 highcharts、和json    所以我先下载了jquery文件和highcharts文件   引用了json

    文件我会很快传到网盘上供大家下载，大家可以到我这个博客中下载。(记得引用到项目中)

   json需要添加引用System.Web.Extensions.dll中，是.Net3.x 中新增的类，如果在.Net2.0中则需要用第三方的组件

  

 ②单击显示曲线的时候向后台的发出处理请求并返回数据：

[javascript] view plaincopyprint?

1.  <script type='text/javascript'>  
2.       //声明数组  模拟后台获得数据   
3.       //每次调用获得一条新数据放在末尾，第一条数据丢弃  
4.       var dataArray = new Array();  
5.   
6.   
7.       $(function() {  
8.           $("#myjisuan").click(function() {  
9.               $.post("rightbody_predict.aspx?id=1", function(data) {  
10.                   //alert(data);   
11.   
12.                   var obj = $.parseJSON(data); //把JSon格式的字符串转换为JavaScript对象                   
13.                   var ss = document.getElementById("<%=tbInterval.ClientID%>").value;                    
14.                   for (var i = 0; i < obj.length - 1; i++) {  
15.                       
16.                       dataArray[i] = obj[i];  
17.   
18.                   }           
19.   
20.   
21.               });              
22.           });  
23.       });  
24. </script>  

 <script type='text/javascript'>      //声明数组  模拟后台获得数据      //每次调用获得一条新数据放在末尾，第一条数据丢弃      var dataArray = new Array();      $(function() {          $("#myjisuan").click(function() {              $.post("rightbody_predict.aspx?id=1", function(data) {                  //alert(data);                  var obj = $.parseJSON(data); //把JSon格式的字符串转换为JavaScript对象                                   var ss = document.getElementById("<%=tbInterval.ClientID%>").value;                                    for (var i = 0; i < obj.length - 1; i++) {                                          dataArray[i] = obj[i];                  }                       });                      });      });</script>

③组织数据，在这里就不在建立数据库了  直接从后台模拟一组数据，下面的代码仅供参考。

[csharp] view plaincopyprint?

1. public class Handler1 : IHttpHandler  
2.    {  
3.   
4.        public void ProcessRequest(HttpContext context)  
5.        {  
6.            context.Response.ContentType = "text/plain";  
7.            int[] num = new int[10] {2,12,1,45,12,78,34,15,56,97 };  
8.            int[] num1 = new int[10] { 2, 12, 1, 45, 12, 78, 34, 15, 56, 97 };  
9.            int[] num2 = new int[10] {34, 67, 1, 76, 1, 2, 12, 19, 23, 21 };  
10.            int[] num3 = new int[10] { 2, 12, 39, 40, 17, 98, 23, 29, 36, 1 };  
11.            int[] num4 = new int[10] { 14, 45, 6, 78, 98, 89, 3, 67, 45, 15 };  
12.            int[] num5 = new int[10] { 12, 2, 33, 3, 12, 67, 4, 43, 87, 5 };  
13.            int[] num6 = new int[10] { 33, 3, 43, 89, 34, 54, 12, 2, 56, 4 };  
14.            int[] num7 = new int[10] { 65, 45, 12, 33, 12, 34, 35, 1, 34, 33 };  
15.            object[] nums2 = new object[8] {num,num1,num2,num3,num4,num5,num6,num7 };  
16.           
17.            
18.           JavaScriptSerializer jss = new JavaScriptSerializer();  
19.           string json = jss.Serialize(nums2);//   
20.           context.Response.Write(json);  
21.   
22.        }  

 public class Handler1 : IHttpHandler    {        public void ProcessRequest(HttpContext context)        {            context.Response.ContentType = "text/plain";            int[] num = new int[10] {2,12,1,45,12,78,34,15,56,97 };            int[] num1 = new int[10] { 2, 12, 1, 45, 12, 78, 34, 15, 56, 97 };            int[] num2 = new int[10] {34, 67, 1, 76, 1, 2, 12, 19, 23, 21 };            int[] num3 = new int[10] { 2, 12, 39, 40, 17, 98, 23, 29, 36, 1 };            int[] num4 = new int[10] { 14, 45, 6, 78, 98, 89, 3, 67, 45, 15 };            int[] num5 = new int[10] { 12, 2, 33, 3, 12, 67, 4, 43, 87, 5 };            int[] num6 = new int[10] { 33, 3, 43, 89, 34, 54, 12, 2, 56, 4 };            int[] num7 = new int[10] { 65, 45, 12, 33, 12, 34, 35, 1, 34, 33 };            object[] nums2 = new object[8] {num,num1,num2,num3,num4,num5,num6,num7 };                              JavaScriptSerializer jss = new JavaScriptSerializer();           string json = jss.Serialize(nums2);//            context.Response.Write(json);        }

 ④得到返回的数据渲染到客户端
 

[csharp] view plaincopyprint?

1.    

[javascript] view plaincopyprint?

1. $(function () {  
2.           //声明报表对象        
3.           var chart = new Highcharts.Chart({  
4.               chart: {  
5.                   //将报表对象渲染到层上       
6.                   renderTo: 'container'  
7.               },  
8.               title: {  
9.                   text: '表的标题', //设置一级标题      
10.                   x: -20 //center      
11.               },  
12.               xAxis: {  
13.                   title: {  
14.                       text: 'x轴', //设置一级标题      
15.                       x: -20 //center     
16.                   }  
17.               },  
18.               yAxis: {  
19.                   title: {  
20.                       text: 'y轴', //设置一级标题      
21.                       y: -20 //center     
22.                   }  
23.               },  
24.               //设定报表对象的初始数据      
25.               series: [{  
26.                   name: '折现代表的意思',  
27.                   data: [0.0, 0.0, 0.0, 0.0, 0.0]  
28.               }]  
29.           });  
30.   
31.   
32.           var i = 0;  
33.           function getForm() {  
34.   
35.               //模拟后台得到的数据，进行赋值     
36.               chart.series[0].setData(dataArray[i++]);  
37.               
38.           }  
39.   
40.   
41.           //每隔3秒自动调用方法，实现图表的实时更新     
42.              
43.   
44.           window.setInterval(getForm, 1000);  
45.           //alert(parseInt(ss) * 1000);          
46.   
47.       });      

  $(function () {            //声明报表对象                 var chart = new Highcharts.Chart({                chart: {                    //将报表对象渲染到层上                         renderTo: 'container'                },                title: {                    text: '表的标题', //设置一级标题                        x: -20 //center                   },                xAxis: {                    title: {                        text: 'x轴', //设置一级标题                            x: -20 //center                       }                },                yAxis: {                    title: {                        text: 'y轴', //设置一级标题                            y: -20 //center                       }                },                //设定报表对象的初始数据                   series: [{                    name: '折现代表的意思',                    data: [0.0, 0.0, 0.0, 0.0, 0.0]                }]            });            var i = 0;            function getForm() {                //模拟后台得到的数据，进行赋值                   chart.series[0].setData(dataArray[i++]);                          }            //每隔3秒自动调用方法，实现图表的实时更新   //                       window.setInterval(getForm, 1000);            //alert(parseInt(ss) * 1000);                });    

最后在body里面设置一个id为的div