160422、Highcharts后台获取数据

而我这次做的是趋势图,涉及到动态刷新,做的过程还是花了一番功夫的,也补充和巩固了一点js的知识,为了纪念,把过程记录一下:

首先,是引入HIghcharts绘图相关的js文件和jQuery.js。

接下来,把HIghcharts动态刷新的格式拷贝并作修改:

$(function(){
    $(document).ready(function() {
      Highcharts.setOptions({
        global: {
          useUTC: false//是否使用世界标准时间        }
      });
      var chart;
      chart = new Highcharts.Chart({
        chart: {
          renderTo: ‘container‘,
          type: ‘spline‘,
          marginRight: 10,
          events: {
            load: function() {
               var series = this.series;
               setInterval(function() {
                 var result = reload();
                 var x = result.time;
                 for(var i=0; i<series.length; i++) {
                   var y = result.y[i];
                   series[i].addPoint([x, y], true, true);
                 }
               }, 1000*5);
            }
          }
        },
        title: {
          text: ‘ssssss‘        },
        xAxis: {
          type: ‘datetime‘,
          tickPixelInterval: 150        },
        yAxis: {
          title: {
            text: ‘Value‘          },
          plotLines: [{
            value: 0,
            width: 1,
            color: ‘#808080‘          }]
        },
        tooltip: {
          formatter: function () {            return ‘<b>‘ + this.series.name + ‘</b><br/>‘ +
        Highcharts.dateFormat(‘%Y-%m-%d %H:%M:%S‘, this.x) + ‘<br/>‘ +
        Highcharts.numberFormat(this.y, 2);
          }
        },
        //图例属性        legend: {
          layout: ‘vertical‘,
          align: ‘right‘,
          verticalAlign: ‘top‘,
          borderWidth: 0      },
        exporting: {
          enabled: false        },
        series: create()
      });
    });
  });

重点是chart里面的event属性,series属性。注意,此时:series属性是一个js函数的返回值,需用“js函数名()”来取得。

而demo里面,series是这样的:

series: [{
  name: ‘Random data‘,
  data: (function() {
    // generate an array of random data							     var data = [],
      time = (new Date()).getTime(),
      i;
    for (i = -19; i <= 0; i++) {
      data.push({
        x: time + i * 1000,
        y: Math.random()
      });
    }
    return data;
  })()
}]

这是死数据,并且只显示一条曲线(或折线)。我们需要得到后台数据,并且x,y的值都需要由后台决定。

create()方法的定义如下:

function create() {    var series = new Array();
        $.ajax({
      type: "POST",
      url: "xxxx/yyyyy.json",
      async: false, //表示同步,如果要得到ajax处理完后台数据后的返回值,最好这样设置      success: function(result){
        var channels = result.key;
        var size = channels.length;
        for(var i=0; i<size; i++) {
          var name = channels[i].yyyy;
          var perTotalCnt = channels[i].xxxx;
          var data = function() {
            var data = [],
              time = result.time,
              i;
            for(i=-6; i<=0; i++) {
              data.push({
                x: aaaa,
                y: zzzz
              });
            }
                        return data;
          }();
          series.push({"name": name, "data": data});
        }
      }
    }, false);  //false表示“遮罩”,前台不显示“请稍后”进度提示    alert(series);
        return series;
      }

其中, series.push({"name": name, "data": data});这一行就是在往series数组[]中push数据,从而生成格式中需要的series数组;

而这一部分:

events: {
            load: function() {
               var series = this.series;
  setInterval(function() {
                            	 var result = reload();
                            	 var x = result.time;
                            	 for(var i=0; i<series.length; i++) {
                            		 var y = result.y[i];
                            		 series[i].addPoint([x, y], true, true);
                            	 }
  }, 1000*5);
      }
}

则是每隔一段时间(1000*5=5s)刷新页面数据,并且通过循环生成多条"曲线"。其中reload()也是一个js函数的返回值:注:定义json对象的方法var json = {"key1": value1, "key2":value2} (reload方法就不贴了,也是通过ajax请求后台,得到相应数据并且处理相应数据后,放到一个数据结构或json对象中)。

效果:

画图完毕。

时间: 2024-10-01 09:46:03

160422、Highcharts后台获取数据的相关文章

ajax从asp后台获取数据

1.前台 $.ajax({ //url: "demo/data/taskTree.txt", url: "GanttChart.aspx?taskList=1" , cache: false, success: function (text) { var data = mini.decode(text); gantt.loadTasks(data); gantt.unmask(); //折叠全部 //gantt.collapseAll(); } }); 2.后台 ?

Swift - 后台获取数据(Background Fetch)的实现

前面讲了如何让程序申请后台短时运行.但这个额外延长的时间毕竟有限.所以从iOS7起又引入两种在后台运行任务的方式:后台获取和后台通知. 1,后台获取介绍 后台获取(Background Fetch)是为了那些需要定期更新的应用程序设计的,比如天气应用,新闻客户端,社交网络应用程序等.在启动后台获取之后,应用程序可以在后台被唤醒,在后台获取最新信息,以便在用户将应用程序转到前台时能够立即显示这些信息. 2,后台获取功能开启 首先在选中项目,在Capabilities(功能)选项卡,启用Backgr

jsTree通过AJAX从后台获取数据

页面代码: <div id="MenuTree"></div> javascript代码: $(document).ready(function ($) { InitMenuTree(); }); function InitMenuTree() { $('#MenuTree').data('jstree', false); $.getJSON('@Url.Action("GetMenuTree", "AdminMenu")

在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效??

在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效?? 是因为swiper提前初始化了,那时候数据还没有完全出来.这里有两种解决办法 1. 使用vue提供的$nextTick()方法 当Vue构造器里的data值被修改完成后会调用这个方法,也相当于一个钩子函数吧,和构造器里的updated生命周期很像. 在数据初始化完毕之后,再初始化swiper就不会出现问题了 this.$nextTick(function () { var swiper = new Swiper(

下拉插件 (带搜索) Bootstrap-select 从后台获取数据填充到select的 option中 用法详解

今天收到了客户的需求,要求在新增停车场ID的时候要从数据库查出来对应的停车场名称然后显示在界面上.保存的时候按照停车场ID进行保存. 自己首先把后台的部分写完了,测试了接口数据.成功的拿到了ajax数据. 接下来,自己用了select下拉标签和js函数进行填充后台传过来的数据. 经过自己的不断百度和参考别人的博客,试了很多次终于成功的调试出了想要的结果. 特来博客记录一下,也分享一下开心的心情. (一)首先引入样式和JS文件 样式文件和JS下载放到本地最好,因为放到本地自己可以修改一些东西. 在

highcharts动态获取数据生成图表问题

动态获取数据说白点就是从后台传值到前台,前台把这些值赋值给x轴与y轴.  柱状图的动态传值: //获取后台数据 var x = [];//X轴 var y = [];//Y轴 var xtext = [];//X轴TEXT var color = ["#FFB6C1","#DC143C","#C71585","#D8BFD8","#8B008B","#4B0082","#6A5

aceAdmin fuelux tree 从后台获取数据,并设置节点ID等属性

如题,从后台封装数据,有两种方式渲染节点的数据: 1.全部节点加载 2.根据父节点加载子节点 首先,先介绍下第一种渲染方式: 后台返回数据格式(所有的附加属性,都可放在additionalParameters下): 前端页面html: <div class="widget-body"> <div class="widget-main padding-8"> <div id="treeview" class="

后台获取数据实现实时折线图

折线图用的是echarts的折线图.框架用的ssm,连接oracle数据库,将数据实时显示在折线图上. <div id="main" style="width: 95%; height: 60%; margin: auto;"></div> <script> function showEcharts() { require( [ 'echarts', 'echarts/chart/line' ], function(ec) { /

vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据

在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-server模拟的接口,这个前面的文章中有提到,需要的可以去翻阅. 整个的流程是在组件的created中提交dispatch,然后通过action调用一个封装好的axios然后再触发mutation来提交状态改变state中的数据,然后在组件的计算属性中获取state的数据并渲染在页面上 首先新需要在项