Highcharts学习使用小结

Highcharts学习使用小结

目前，手头的项目需要对数据实现图表显示，接手之前就开始了解相关图表生成插件工具，最后选定当前比较成熟的highcharts图表工具，当然还有一个相对的优势就是highcharts免费。简单的了解highcharts的API，便做了几个小demo尝试了下，由于新接手的项目，自己一开始就弄了个比较复杂的部分，需要实现多条曲线实时动态效果。由于，后面数据多渠道收集问题，这里就直接用了定时器定时刷新数据。后台传过来是modelMap.put("data", list);到前端封装解析，下面是简单的代码实现。

View Code

 1 <script type="text/javascript">
 2     function getChart(data){
 3           var chart = new Highcharts.Chart({                         
 4             chart: {
 5                   renderTo: 'container',
 6                   type: 'spline',                            
 7         },             
 8         series:data                    
 9            });
10       }
11     function getForm(){  
12        $.ajax({
13            url: "query.htm",
14            type: "post",     
15            cache: false,
16            dataType: "json",
17            data: {},
18            ifModified: false,
19            success: function(result,status){
20             var staticsData=new Array();
21             var seriesdata=new Array();    
22             var json=result.data;
23             $.each(json,function(i,item){            
24                 staticsData.push({x:item.x_time+28800000,y:item.y});
25                 if(((i+1==json.length)||json[i].name!=json[i+1].name)){
26                     seriesdata.push({name:json[i-1].name,data:staticsData});
27                     staticsData=new Array();
28                 }
29             });
30             getChart(seriesdata);
31         }
32        });
33       }
34      $(function(){      //定时刷新数据  
35        $(document).ready(function() {  
36               getForm();  
37            window.setInterval(getForm,120000);     
38        });       
39       });
40  </script>

后面highcharts还做了其他类型的图表，总体来说也就是数据封装展示。不过后面遇到个比较头疼的问题，曲线数量太多导致臃肿显示太难看了，我得想法是有空弄分页，不知道各位大侠有没有什么好的想法，希望大家多多指导。

posted on 2013-03-29 09:50  黑山老妖拉肚子 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/lanmaoluliu/archive/2013/03/29/2988281.html