hightCharts图表＋angularJS+实时动态显示数据

来源：互联网发布：大数据发展的就业前景编辑：程序博客网时间：2024/05/22 19:18

首先推荐 highcharts 中文网站，http://www.hcharts.cn/，可以先看看最基本的例子，以及highcharts怎么配置,下面就结合目前所做的总结下hightCharts

（1）hightCharts配置项

title,subtitle,colors,xAxis,yAxis,tooltip,plotOptions,legend,exporting,series

（2）highCharts初始化方法

  var options={}  chart = new Highcharts.Chart(options)  var json={}  $('#...').highcharts(json);

(3) 动态实时图的实现方法

第一种，参考官网上的动态刷新图：http://www.hcharts.cn/demo/index.php?p=46，以及 http://www.tuicool.com/articles/2E3qIba

图表其他配置，这里就不写，重点写有关动态刷新的部分

var options={    series:[{name:"数据列名"}],             chart:{                   type:"spline",                   animation:Highcharts.svg,                   renderTo:"container",                   events:{                         load:function(){                         var series=this.series[0];                         setInterval(function(){                             $http.get('你的请求路径').success(function(dataArray){                             //解析数据，每次加载图时，添加一个点［x,y]                                 series.addPoint([x,y],true,true);                             }).error(function(errorArray){ //请求数据错误处理});                         },10000);                  ｝｝

               ｝         }

function initData(){         var datas=[];                                                        $http.get('你的请求路径').success(function(dataArray){          //解析数据，初始化数据列，请求n条数据            for(var i=0;i<n;i++)                      datas.push({x:..,y:...});               options.series[0].data=datas;               chart=new Highcharts.Chart(options);         }).error(function(errorArray){ //请求数据错误处理});

｝initData();

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

第二种，是每隔一段时间，重新绘制整个图标,参考：http://bbs.hcharts.cn/thread-36-1-1.html

var options={各种静态配置}；function queryData(){  $http.get('你的请求路径').success(function(dataArray){    //解析数据，初始化数据列，请求n条数据     for(var i=0;i<n;i++)               datas.push({x:..,y:...});        options.series[0].data=datas;        chart=new Highcharts.Chart(options);  }).error(function(errorArray){ //请求数据错误处理});}queryData();

var timer=setInterval(function(){          queryData();},10000)

0 0