ajax定时刷新Highcharts

转载 2015年07月08日 13:38:02

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Highcharts Example</title>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript">
  //x轴值
  var categories=<%=categories%>;

  //y轴值
  var data=<%=data%>;
    
  //创建图表
  var chart;
  $(document).ready(function() {
   chart = new Highcharts.Chart( {
    chart : {
     renderTo : 'container',
     type : 'bar',
     events : {
      load : st// 定时器
     }
    },
    title : {
     text : '动物数量统计'
    },
    xAxis : { 
     categories : categories,
     title : {
      text : 'name'
     }
     
    },
    yAxis : {
     min : 0,
     title : {
      text : 'number'
     }
    },
          legend: {
              enabled: false
          },
    tooltip : {
     formatter : function() {
      return '' + this.series.name + ': ' + this.y + '';
     }
    },
          credits : {
              enabled: false
          },
    plotOptions : {
     series : {
      stacking : 'normal'
     }
    }, 
    series : [ {
     name : '个',
     data : data
    } ]
   });
   
   
  });


  //10秒钟刷新一次数据
  function st() {
   setInterval("getData()", 10000);
  }

  //动态更新图表数据
  function getData() {
   
   var categories = [];
   $.ajax({
      type: "post",
      url: "${pageContext.request.contextPath}/demo/chart_demo.action",    
      dataType: "json",
      success : function(data){
     var d = [];
       $(data).each(function(n,item){
        d.push(item.data);
        categories.push(item.categories);
       })
      chart.series[0].setData(d);
      chart.xAxis[0].setCategories(categories);
      }
    });
  }

  </script>
 </head>
 <body>
<script type="text/javascript" src="${pageContext.request.contextPath}/highcharts/highcharts.js" charset="utf-8"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/highcharts/funnel.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/highcharts/highcharts-more.js"></script>

<div id="container" ></div>
 </body>
</html>

ajax定时刷新Highcharts

Highcharts Example   http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">>      //...
  • seashoreman
  • seashoreman
  • 2013年12月12日 07:43
  • 4749

Highcharts ajax获取json对象动态生成报表生成 .

http://blog.csdn.net/wsk7860/article/details/8751061
  • Baple
  • Baple
  • 2014年11月11日 16:23
  • 14035

Highcharts ajax加载数据实例

这里我只给出重要代码 思路是先通过ajax请求数据库数据,返回回来数组,我这里以servlet为例。就知道url啥意思了。 $(function () { var le=new Array...
  • qq_22222499
  • qq_22222499
  • 2017年01月03日 12:07
  • 1342

Highcharts、Ajax、PHP交互

1、首先将Highcharts插件所需的js跟css样式文件引入项目中;
  • zb27149
  • zb27149
  • 2016年12月27日 09:45
  • 373

highcharts ajax加载数据

highcharts ajax加载数据
  • luolian123456
  • luolian123456
  • 2015年12月22日 09:30
  • 1153

HighCharts中的Ajax请求的2D折线图

HighCharts中的Ajax请求的2D折线图 设计源码: HighCharts 2D带Label的折线图 $(function(){ // 获...
  • you23hai45
  • you23hai45
  • 2014年04月07日 22:36
  • 1919

jquery, highcharts, Ajax读取json数据

highcharts结合jquery和ajax的方法读取和展现json数据。先上代码和结果。 首先,给出相关的data.json文件中的json数据:{ "success": true, "...
  • lcxlxm
  • lcxlxm
  • 2016年11月28日 16:06
  • 945

Highcharts通过AJAX访问后台数据库实时刷新

最近项目中要做一个实时人流量的折线统计图,接触了下Highcharts在网上看了很多博客和官方API,总结出一下代码。$(function () { var chart = Highchart...
  • qq_34905123
  • qq_34905123
  • 2016年11月29日 14:00
  • 2706

用Ajax+js+jQuery实现无闪烁定时刷新页面 定时刷新

本人想在一个JSP页面上显示一个消息模块,这个消息需要定时更新,请问大家如何用Ajax+js+jQuery实现无闪烁定时刷新页面功能。本人使用的js框架是jQuery。 你好...
  • xinyuan_java
  • xinyuan_java
  • 2014年09月30日 12:16
  • 4583

Asp.net ajax定时刷新页面

要实现定时的刷新页面 使用Timer控件,  Time控件需要配置触发器,触发器事件被触发,UpdatePanel就会刷新页面。触发器需要配置的属性有 ControlID 和 EventName。以...
  • zhuxueliao
  • zhuxueliao
  • 2012年11月16日 15:31
  • 704
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ajax定时刷新Highcharts
举报原因:
原因补充:

(最多只允许输入30个字)