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

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

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

   效果图

一、实现步骤

  ①准备需要的文档

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

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

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

  

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

 <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>


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

 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);

        }

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

 
  $(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
 

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 11

打赏作者

时代以诺

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值